Grid
Simple grid lines pattern with adjustable thickness and rotation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | color | #ffffff | The color of the grid lines |
| cellColor | color | transparent | Fill color of the cells (transparent = lines only). Pair with Variation for a tiled look. |
| cells | range | 10 | Number of cells along the canvas height (cells stay square; the width fits as many as the aspect ratio allows) |
| thickness | range | 1 | Thickness of grid lines (normalized, 0.0-1.0) |
| rotation | range | 0 | Rotation of the grid in degrees. At 45° this produces a crosshatch/diamond pattern. |
| softness | range | 0 | Softness of the line edges (0 = crisp, 1 = very soft) |
| variation | range | 0 | Per-cell random lightening/darkening of the cell fill color |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<Grid
color="#ffffff"
/>
</Shader>