Chevron

Animated chevron / zigzag stripe pattern

Props

colorA
First color
Type
string
Default
#000000
colorB
Second color
Type
string
Default
#ffffff
count
Number of chevron pairs visible
Type
number
Default
5
angle
Rotation angle of the chevrons
Type
number
Default
0
balance
Ratio of the two colors
Type
number
Default
0.5
softness
Edge softness
Type
number
Default
0
speed
Animation speed
Type
number
Default
0
offset
Phase offset for pattern positioning
Type
number
Default
0
colorSpace
Color space for interpolation
Type
"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default
linear

Usage

<Shader>
  <Chevron />
</Shader>

<Shader>
  <Chevron />
</Shader>

<Shader>
  <Chevron />
</Shader>

<Shader>
  <Chevron />
</Shader>

import { createShader } from 'shaders/js'

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