SVG Pattern Generator

Halftone Field

Dots on a fixed grid, sized by a field that swells and thins.

893 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

  • Halftone FieldGRID · NOISE
    Portrait — inset plate
  • HalftoneFieldGRID · NOISE
    Portrait — full bleed
  • HalftoneFieldGRID · NOISE
    Landscape — split
  • Halftone FieldGRID · NOISE
    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

The dots never move. Each sits at its own grid station and the only thing that varies is its radius, read from a field built by combining the distance to the centre with a band of gradient noise. That is exactly how a print halftone works, and it is why the result stays legible however hard you push it: the grid supplies the order, the field supplies the image, and the two never fight. Turn the warp down and it is a clean radial gradient; turn it up and the noise takes over the tonal range.

Related patterns