SVG Honeycomb Pattern Generator

Honeycomb SVG patterns: hexagonal tessellation for the web

The honeycomb pattern is one of the most efficient geometric tessellations known to mathematics. A regular hexagon tiles the plane with no gaps and no overlaps using only three shapes at each vertex — and the resulting mesh has the minimum total perimeter for a given covered area. This is the famous honeycomb conjecture, hinted at by Pappus of Alexandria around 300 AD and finally proven by Thomas Hales in 1999. Honeybees, optimising wax consumption, arrive at exactly the same solution without ever reading the proof.

For a regular hexagon with side length a, the tile dimensions are width = a·sqrt(3) and height = 2a, giving an aspect ratio of roughly 1 : 1.155. Inside an SVG <pattern>, you place one full hexagon and let the browser tile it on a staggered grid.

<pattern id="hex" width="60" height="52" patternUnits="userSpaceOnUse">
  <polygon points="30,2 58,15 58,40 30,53 2,40 2,15"
           fill="none" stroke="#888" stroke-width="1"/>
</pattern>

Flat-top versus pointy-top

Hex grids come in two orientations. Flat-top hexagons (horizontal edge on top) are taller than wide and stack naturally in vertical columns — great for landscape board games, Civilization VI maps and dashboards where rows are the primary axis. Pointy-top hexagons (vertex on top) are wider than tall and align in horizontal rows — preferred by Catan and most wargames. Pick the one whose primary axis matches the way your content reads.

Where honeycomb shows up

• Nature — beehives, insect compound eyes, basalt columns at the Giant's Causeway in Ireland, turtle scutes and dragonfly wings.
• Board games and wargames — Catan, Civilization VI and most hex-based tactical games.
• Data visualisation — D3.js hexbin plots replace square heatmaps because hexagons have lower perimeter-to-area ratio and pack denser, reducing visual aliasing.
• Tech branding — Block (formerly Square), Substack and dozens of crypto projects use hex marks for a modern, structured feel.
• Engineering — aerospace honeycomb panels (high strength-to-weight ratio) and beekeeping precision farming grids.

SVG versus CSS

Building a hex tile in pure CSS is painful — there is no native hexagon() shape, so you have to combine three rotated rectangles or chain clip-path: polygon(...) with careful offsets. SVG, by contrast, gives you the geometry as a single <polygon> and tiles it through patternUnits="userSpaceOnUse". Add shape-rendering="geometricPrecision" if you need crisper anti-aliased edges, especially when zooming in.

FAQ

Why hexagons instead of squares? Hexagonal grids minimise perimeter per area (proven by Hales, 1999) and every neighbour is equidistant — unlike a square grid where diagonals are sqrt(2) further away. That makes pathfinding and heat maps fairer.

Flat-top or pointy-top — which should I pick? Match your primary axis. Horizontal content reads better on pointy-top rows; vertical scrolling lists stack cleaner with flat-top columns.

Can I do this in pure CSS? You can, but it gets verbose fast. For a static decorative pattern, SVG with <pattern> is shorter, scales without artefacts, and re-colours with a single fill attribute.

Is everything generated locally? Yes. The SVG markup is produced in your browser; nothing is uploaded.