SVG Pattern Generator

Concentric Drift

Rings that hold their shape at the centre and lose it at the rim.

34 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

  • ConcentricDriftRADIAL · NOISE · DISTORTION
    Portrait — inset plate
  • ConcentricDriftRADIAL · NOISE · DISTORTION
    Portrait — full bleed
  • ConcentricDriftRADIAL · NOISE · DISTORTION
    Landscape — split
  • Concentric DriftRADIAL · NOISE · 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

Rings are drawn as closed polygons, and every vertex is pushed in or out along its own radius by a sample of gradient noise. Because the noise is sampled in the ring’s own coordinates, neighbouring rings read nearly the same value and drift together rather than crossing — the family deforms as a sheet. Drift is scaled by a power of the ring index, so the innermost rings stay very nearly circular and give the eye a fixed reference for how far the outer ones have wandered.