Duotone

Map colors to two tones based on luminance

Props

colorAstring

Default:#ff0000

First color (used for darker areas)

colorA

stringDefault: #ff0000

First color (used for darker areas)

colorBstring

Default:#023af4

Second color (used for brighter areas)

colorB

stringDefault: #023af4

Second color (used for brighter areas)

blendnumber

Default:0.5

Blend point between the two colors

blend

numberDefault: 0.5

Blend point between the two colors

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Duotone>
    <Circle />
  </Duotone>
</Shader>

<Shader>
  <Duotone>
    <Circle />
  </Duotone>
</Shader>

<Shader>
  <Duotone>
    <Circle />
  </Duotone>
</Shader>

<Shader>
  <Duotone>
    <Circle />
  </Duotone>
</Shader>

import { createShader } from 'shaders/js'

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

DropShadow

Ellipse

Documentation

Duotone

Props

Usage