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 — your colours
  • Jitter GridGRID · DISTORTION
    Portrait — lime on forest
  • Jitter GridGRID · DISTORTION
    Landscape — ink on mint
  • Jitter GridGRID · DISTORTION
    Landscape — forest on peach

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.