Grid

Simple grid lines pattern with adjustable thickness and rotation

Props

  • color

    The color of the grid lines

    Type
    string
    Default
    #ffffff

  • cellColor

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

    Type
    string
    Default
    transparent

  • cells

    Number of cells along the canvas height (cells stay square; the width fits as many as the aspect ratio allows)

    Type
    number
    Default
    10

  • thickness

    Thickness of grid lines (normalized, 0.0-1.0)

    Type
    number
    Default
    1

  • rotation

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

    Type
    number
    Default
    0

  • softness

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

    Type
    number
    Default
    0

  • variation

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

    Type
    number
    Default
    0

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

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