SVG Pattern Generator

Flow Dots

A comb of points walked down a vector field, leaving a trail.

5,000 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

  • Flow DotsFLOW · GRID
    Portrait — inset plate
  • Flow DotsFLOW · GRID
    Portrait — full bleed
  • Flow DotsFLOW · GRID
    Landscape — split
  • Flow DotsFLOW · GRID
    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

Points are released in an even comb along the top edge and each is walked downward in fixed steps, its direction at every step read from an angle field built out of gradient noise, with a dot dropped at each station. Along any one strand the spacing never changes, so a dot never leaves its own row — what comes apart is only the order across the flow. With turbulence at zero the field is vertical and the dots hold a plain rectangular grid; raising it is what makes the strands crowd, part, and occasionally braid.