SVG Pattern Generator

Warped Mesh

Graph paper pulled out of true by a field underneath it.

54 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

  • Warped MeshDISTORTION · NOISE
    Portrait — inset plate
  • Warped MeshDISTORTION · NOISE
    Portrait — full bleed
  • Warped MeshDISTORTION · NOISE
    Landscape — split
  • Warped MeshDISTORTION · 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

A mesh of horizontal and vertical lines, subdivided finely enough to bend, with every vertex displaced by a two-component sample of the same noise field. Both families read the same field, so the mesh stretches and compresses as one surface and the cells stay quadrilaterals instead of tearing. Because the eye knows exactly what a square grid should look like, it reads the deviation directly as depth — the pattern is a lens with nothing behind it.

Related patterns