Skip to main content
Static grid pattern made of circles, diamonds, squares or triangles. Features customizable size, spacing, stroke width, and random variations.

​
React Usage

import { DotGrid } from '@paper-design/shaders-react';

export default function MyComponent() {
  return (
    <DotGrid
      colorBack="#000000"
      colorFill="#ffffff"
      colorStroke="#ffaa00"
      size={2}
      gapX={32}
      gapY={32}
      strokeWidth={0}
      sizeRange={0}
      opacityRange={0}
      shape="circle"
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

import { mountDotGrid } from '@paper-design/shaders';

const canvas = document.getElementById('myCanvas');
const cleanup = mountDotGrid(canvas, {
  colorBack: '#000000',
  colorFill: '#ffffff',
  colorStroke: '#ffaa00',
  size: 2,
  gapX: 32,
  gapY: 32,
  strokeWidth: 0,
  sizeRange: 0,
  opacityRange: 0,
  shape: 'circle',
});

// Call cleanup() when done

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format.
​
colorFill
string
default:"'#ffffff'"
Shape fill color in hex format.
​
colorStroke
string
default:"'#ffaa00'"
Shape stroke color in hex format.
​
size
number
default:"2"
Base size of each shape in pixels. Range: 1 to 100.
​
gapX
number
default:"32"
Pattern horizontal spacing in pixels. Range: 2 to 500.
​
gapY
number
default:"32"
Pattern vertical spacing in pixels. Range: 2 to 500.
​
strokeWidth
number
default:"0"
Outline stroke width in pixels. Range: 0 to 50.
​
sizeRange
number
default:"0"
Random variation in shape size. 0 creates uniform sizes, higher values add randomness up to base size. Range: 0 to 1.
​
opacityRange
number
default:"0"
Random variation in shape opacity. 0 makes all shapes opaque, higher values add semi-transparency. Range: 0 to 1.
​
shape
'circle' | 'diamond' | 'square' | 'triangle'
default:"'circle'"
Shape type for the dots:
  • circle: Round dots
  • diamond: 45-degree rotated squares
  • square: Square dots
  • triangle: Triangular dots

​
Common Sizing Parameters

​
scale
number
default:"1"
Overall zoom level of the graphics. Range: 0.01 to 4.
​
rotation
number
default:"0"
Rotation angle in degrees. Range: 0 to 360.
​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions.
​
offsetX
number
default:"0"
Horizontal offset of the graphics center. Range: -1 to 1.
​
offsetY
number
default:"0"
Vertical offset of the graphics center. Range: -1 to 1.

​
Presets

The Dot Grid shader comes with several built-in presets:
  • Default: White circles with orange stroke
  • Triangles: Gray outlined triangles
  • Tree line: Random sized green circles in vertical rows
  • Wallpaper: Gold outlined diamonds on green
import { DotGrid, treeLinePreset } from '@paper-design/shaders-react';

<DotGrid {...treeLinePreset.params} />

​
Notes

  • This shader is static and does not animate
  • Supports higher resolution rendering (up to 6016×3384 pixels)
  • Use sizeRange and opacityRange to create organic, hand-drawn effects