SVG Pattern Generator

Triangle Field

Upward triangles whose gaps point down.

1 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

  • Triangle FieldSEAMLESS · GRID
    Portrait — inset plate
  • TriangleFieldSEAMLESS · GRID
    Portrait — full bleed
  • TriangleFieldSEAMLESS · GRID
    Landscape — split
  • Triangle FieldSEAMLESS · 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

One triangle per cell, pointing up, in a cell that is √3⁄2 as tall as it is wide — the proportion that makes the triangle equilateral. That ratio is what makes the pattern work: the spaces left between the repeats are themselves equilateral triangles pointing down, so half the design is the background rather than a second shape. Shrinking the triangle opens the field without disturbing the geometry.

Related patterns