ConicGradient

Colors sweep in a full circle around a center point, like a color wheel

Props

colorAstring

Default:#FF0080

Starting color of the sweep

colorA

stringDefault: #FF0080

Starting color of the sweep

colorBstring

Default:#00BFFF

Ending color of the sweep (wraps back to Color A)

colorB

stringDefault: #00BFFF

Ending color of the sweep (wraps back to Color A)

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)

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center point of the sweep

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center point of the sweep

rotationnumber

Default:0

Rotation offset in degrees — shifts where Color A begins

rotation

numberDefault: 0

Rotation offset in degrees — shifts where Color A begins

repeatnumber

Default:1

Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern.

repeat

numberDefault: 1

Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern.

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <ConicGradient />
</Shader>

<Shader>
  <ConicGradient />
</Shader>

<Shader>
  <ConicGradient />
</Shader>

<Shader>
  <ConicGradient />
</Shader>

import { createShader } from 'shaders/js'

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

ConcentricSpin

ContourLines