Checkerboard

Classic checkerboard pattern with two alternating colors

Props

colorAstring

Default:#cccccc

First color of the checkerboard pattern

colorA

stringDefault: #cccccc

First color of the checkerboard pattern

colorBstring

Default:#999999

Second color of the checkerboard pattern

colorB

stringDefault: #999999

Second color of the checkerboard pattern

cellsnumber

Default:8

Number of cells along the canvas height (creates square cells). Switch the unit to px in the editor to set an absolute cell size instead.

cells

numberDefault: 8

Number of cells along the canvas height (creates square cells). Switch the unit to px in the editor to set an absolute cell size instead.

softnessnumber

Default:0

Smoothness of the transition between colors (0 = hard edges, 1 = very soft)

softness

numberDefault: 0

Smoothness of the transition between colors (0 = hard edges, 1 = very soft)

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

<Shader>
  <Checkerboard />
</Shader>

<Shader>
  <Checkerboard />
</Shader>

<Shader>
  <Checkerboard />
</Shader>

<Shader>
  <Checkerboard />
</Shader>

import { createShader } from 'shaders/js'

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