TriangularGrid

Tiling grid of equilateral triangles with optional animated row offsets

Props

colorAstring

Default:#1a1a1a

Triangle fill color

colorA

stringDefault: #1a1a1a

Triangle fill color

colorBstring

Default:#ffffff

Grid line color

colorB

stringDefault: #ffffff

Grid line color

cellsnumber

Default:8

Number of triangle rows down the shortest canvas edge

cells

numberDefault: 8

Number of triangle rows down the shortest canvas edge

thicknessnumber

Default:1

Thickness of the grid lines (0 = no lines)

thickness

numberDefault: 1

Thickness of the grid lines (0 = no lines)

rotationnumber

Default:0

Rotation of the grid in degrees

rotation

numberDefault: 0

Rotation of the grid in degrees

softnessnumber

Default:0

Softness of the line edges (0 = crisp, 1 = very soft)

softness

numberDefault: 0

Softness of the line edges (0 = crisp, 1 = very soft)

variationnumber

Default:0

Per-triangle random lightening/darkening of the fill color

variation

numberDefault: 0

Per-triangle random lightening/darkening of the fill color

speednumber

Default:0

Animates the triangle rows drifting horizontally (0 = static)

speed

numberDefault: 0

Animates the triangle rows drifting horizontally (0 = static)

speedVariancenumber

Default:0.3

Per-row random speed variance for irregular drifting motion

speedVariance

numberDefault: 0.3

Per-row random speed variance for irregular drifting motion

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <TriangularGrid />
</Shader>

<Shader>
  <TriangularGrid />
</Shader>

<Shader>
  <TriangularGrid />
</Shader>

<Shader>
  <TriangularGrid />
</Shader>

import { createShader } from 'shaders/js'

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

Trapezoid

Tritone