Weave

Interlaced textile weave pattern with two thread colors going over and under each other

Props

colorAstring

Default:#c4c4c4

Horizontal thread color

colorA

stringDefault: #c4c4c4

Horizontal thread color

colorBstring

Default:#4d4d4d

Vertical thread color

colorB

stringDefault: #4d4d4d

Vertical thread color

cellsnumber

Default:10

Number of threads across the shortest canvas edge

cells

numberDefault: 10

Number of threads across the shortest canvas edge

gapnumber

Default:0.25

Gap between threads (0 = no gap, 0.5 = maximum gap)

gap

numberDefault: 0.25

Gap between threads (0 = no gap, 0.5 = maximum gap)

rotationnumber

Default:0

Rotation of the weave pattern in degrees

rotation

numberDefault: 0

Rotation of the weave pattern in degrees

<Shader>
  <Weave />
</Shader>

<Shader>
  <Weave />
</Shader>

<Shader>
  <Weave />
</Shader>

<Shader>
  <Weave />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Weave', props: {} }
  ]
})