Grid

Simple grid lines pattern with adjustable thickness and rotation

Props

colorstring

Default:#ffffff

The color of the grid lines

color

stringDefault: #ffffff

The color of the grid lines

cellColorstring

Default:transparent

Fill color of the cells (transparent = lines only). Pair with Variation for a tiled look.

cellColor

stringDefault: transparent

Fill color of the cells (transparent = lines only). Pair with Variation for a tiled look.

cellsnumber

Default:10

Number of cells along the shortest canvas edge (creates square cells)

cells

numberDefault: 10

Number of cells along the shortest canvas edge (creates square cells)

thicknessnumber

Default:1

Thickness of grid lines (normalized, 0.0-1.0)

thickness

numberDefault: 1

Thickness of grid lines (normalized, 0.0-1.0)

rotationnumber

Default:0

Rotation of the grid in degrees. At 45° this produces a crosshatch/diamond pattern.

rotation

numberDefault: 0

Rotation of the grid in degrees. At 45° this produces a crosshatch/diamond pattern.

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-cell random lightening/darkening of the cell fill color

variation

numberDefault: 0

Per-cell random lightening/darkening of the cell fill color

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Grid
    color="#ffffff"
  />
</Shader>

<Shader>
  <Grid
    color="#ffffff"
  />
</Shader>

<Shader>
  <Grid
    color="#ffffff"
  />
</Shader>

<Shader>
  <Grid
    color="#ffffff"
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Grid', props: { color: '#ffffff' } }
  ]
})

Grayscale

GridDistortion