SVG Pattern Generator

Jitter Grid

An ordered grid of squares losing its composure toward the bottom.

256 shapes · 1000 × 1000 viewBox

Colour

Leaves the backdrop unpainted so the pattern drops onto any surface. Ridgeline and Iso Cube Grid still paint the colour above, because it is what hides the shapes behind them.

Presets
Shape

See it in use

  • Jitter GridGRID · DISTORTION
    Portrait — inset plate
  • Jitter GridGRID · DISTORTION
    Portrait — full bleed
  • Jitter GridGRID · DISTORTION
    Landscape — split
  • Jitter GridGRID · DISTORTION
    Landscape — band

As a website background

Infrastructure that gets out of the way

A worked example — your pattern, sitting behind real page furniture.

Start building

How it works

A plain grid of squares, each nudged off its station and turned on its centre by an amount that starts at nothing along the top edge and grows with depth. The growth is a power curve, so the ramp control decides whether order gives way early and gradually or holds almost to the last rows and then collapses. It is the oldest trick in generative design — Georg Nees printed it in 1968 — and it still works because the eye reads the intact rows as a promise and the broken ones as a broken promise.