Stripes

Alternating colored stripes with animation

Props

colorAstring

Default:#000000

First stripe color

colorA

stringDefault: #000000

First stripe color

colorBstring

Default:#ffffff

Second stripe color

colorB

stringDefault: #ffffff

Second stripe color

anglenumber

Default:45

Angle of stripes in degrees

angle

numberDefault: 45

Angle of stripes in degrees

densitynumber

Default:5

Number of stripe pairs visible

density

numberDefault: 5

Number of stripe pairs visible

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.2

Animation speed

speed

numberDefault: 0.2

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>
  <Stripes />
</Shader>

<Shader>
  <Stripes />
</Shader>

<Shader>
  <Stripes />
</Shader>

<Shader>
  <Stripes />
</Shader>

import { createShader } from 'shaders/js'

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

Stretch

StudioBackground

Documentation

Stripes

Props

Usage