Truchet

Quarter-circle arc tiles that connect to form organic, maze-like flowing curves

Props

colorAstring

Default:#000000

Background color between the arcs

colorA

stringDefault: #000000

Background color between the arcs

colorBstring

Default:#ffffff

Arc line color

colorB

stringDefault: #ffffff

Arc line color

cellsnumber

Default:10

Number of tiles across the shortest canvas edge

cells

numberDefault: 10

Number of tiles across the shortest canvas edge

thicknessnumber

Default:2

Thickness of the arc lines

thickness

numberDefault: 2

Thickness of the arc lines

seednumber

Default:0

Random seed — changes which tiles flip, producing a different maze pattern

seed

numberDefault: 0

Random seed — changes which tiles flip, producing a different maze pattern

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

<Shader>
  <Truchet />
</Shader>

<Shader>
  <Truchet />
</Shader>

<Shader>
  <Truchet />
</Shader>

<Shader>
  <Truchet />
</Shader>

import { createShader } from 'shaders/js'

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