SVG Pattern Generator

Honeycomb

Pointy-top hexagons on their true lattice.

18 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

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

A hexagonal grid does not have one hexagon per rectangular cell, it has two: columns sit √3·r apart, rows 1.5·r apart, and every other row is offset by half a column. So the tile is √3·r wide and 3·r tall, carrying a hexagon at its origin and a second at the half-offset. Any of those three numbers being slightly wrong gives a comb that shears by a fraction of a cell at every repeat — visible immediately, and only at scale.