Swirl

Flowing swirl pattern with multi-layered noise

Props

colorAstring

Default:#1275d8

Primary gradient color

colorA

stringDefault: #1275d8

Primary gradient color

colorBstring

Default:#e19136

Secondary gradient color

colorB

stringDefault: #e19136

Secondary gradient color

stopsobject

Default:null

Multi-stop gradient colors (overrides Color A / Color B when set)

stops

objectDefault: null

Multi-stop gradient colors (overrides Color A / Color B when set)

speednumber

Default:1

Flow animation speed

speed

numberDefault: 1

Flow animation speed

detailnumber

Default:1

Level of detail and intricacy in the swirl patterns

detail

numberDefault: 1

Level of detail and intricacy in the swirl patterns

blendnumber

Default:50

Skew color balance toward A (lower values) or B (higher values)

blend

numberDefault: 50

Skew color balance toward A (lower values) or B (higher values)

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

<Shader>
  <Swirl />
</Shader>

<Shader>
  <Swirl />
</Shader>

<Shader>
  <Swirl />
</Shader>

<Shader>
  <Swirl />
</Shader>

import { createShader } from 'shaders/js'

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