Dot Grid

A clean, static grid pattern of circles, diamonds, squares, or triangles — fully customizable spacing, size, stroke, and randomization, for that subtle "dashboard/design-tool" texture behind your content.

Features

• 4 shape types — Circle, Diamond, Square, or Triangle grid pattern

• Independent X/Y spacing — control horizontal and vertical gaps separately for square or rectangular grids

• Fill & Stroke — set separate colors for the shape fill and its outline, with adjustable Stroke Width

• Size Range — add random size variation per dot for a more organic, hand-placed feel instead of a perfectly uniform grid

• Opacity Range — randomize opacity per shape for subtle depth and texture

• Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

• Background Color

• Fill Color

• Stroke Color

• Shape

• Size

• Gap X

• Gap Y

• Stroke Width

• Size Range

• Opacity Range

• Scale / Rotation / Offset

How to use

1. Add the Dot Grid component onto your canvas

2. Pick a Shape — Circle and Square feel clean and technical, Diamond and Triangle feel more decorative

3. Set Gap X and Gap Y to control the density of the grid

4. Adjust Size and Stroke Width to style each individual shape

5. Add Size Range and/or Opacity Range for a more organic, less mechanical look

Shader powered by Paper Shaders.