Chevron

Animated chevron / zigzag stripe pattern

Props

colorAstring

Default:#000000

First color

colorA

stringDefault: #000000

First color

colorBstring

Default:#ffffff

Second color

colorB

stringDefault: #ffffff

Second color

countnumber

Default:5

Number of chevron pairs visible

count

numberDefault: 5

Number of chevron pairs visible

anglenumber

Default:0

Rotation angle of the chevrons

angle

numberDefault: 0

Rotation angle of the chevrons

balancenumber

Default:0.5

Ratio of the two colors

balance

numberDefault: 0.5

Ratio of the two colors

softnessnumber

Default:0

Edge softness

softness

numberDefault: 0

Edge softness

speednumber

Default:0

Animation speed

speed

numberDefault: 0

Animation speed

offsetnumber

Default:0

Phase offset for pattern positioning

offset

numberDefault: 0

Phase offset for pattern positioning

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for interpolation

colorSpace

Color space for interpolation

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: {} }
  ]
})

Checkerboard

ChromaFlow

Documentation

Chevron

Props

Usage