dot grid
A static grid of geometric shapes — circles, diamonds, squares, or triangles — with independent X/Y spacing, fill, stroke, and randomization controls.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { DotGrid } from '@devmischief/shaders-svelte';
<DotGrid
width={1280}
height={720}
colorBack="#000000"
colorFill="#ffffff"
colorStroke="#ffaa00"
shape="circle"
size={2}
gapX={32}
gapY={32}
strokeWidth={0}
sizeRange={0}
opacityRange={0}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
fit="none"
/>
Shader Props
11 | name | description | type | values |
|---|
| colorBack | Background color shown behind the dots. | string | hex / rgba |
| colorFill | Fill color of each shape. | string | hex / rgb |
| colorStroke | Stroke (outline) color of each shape. Visible when strokeWidth > 0. | string | hex / rgb |
| shape | Shape rendered at every grid cell. | string | circle · diamond · square · triangle |
| size | Base size of each shape in pixels. | number | 1 → 100 |
| gapX | Horizontal spacing between cell centers in pixels. | number | 2 → 500 |
| gapY | Vertical spacing between cell centers in pixels. | number | 2 → 500 |
| strokeWidth | Outline stroke width in pixels. | number | 0 → 50 |
| sizeRange | Random per-dot size variation. 0 = uniform, higher = more variation up to base size. | number | 0 → 1 |
| opacityRange | Random per-dot opacity variation. 0 = fully opaque, higher = more transparency. | number | 0 → 1 |
| fit | How the dot grid is fit into the canvas. | string | none · cover · contain |
Common Props
6 | name | description | type | values |
|---|
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| worldWidth | Virtual width of the graphic before it's scaled to fit the canvas. | number | — |
| worldHeight | Virtual height of the graphic before it's scaled to fit the canvas. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |