Backgrounds built from regular octagons.

Line art on canvas. The colour gradient runs along the edges, never fills them. Every octagon is exactly regular — the shape is the point.

A regular octagon cannot tile the plane.

Proven by Reinhardt in 1918: no strictly convex polygon with seven or more sides tiles at all. So the lattice uses the truncated-square tiling, where the corner cut (2 − √2) / 2 makes the octagon exactly regular.

Nothing is filled, so the leftover square at each node is just an outline — and can be swapped for a small octagon instead. Neighbours are randomly bonded along shared edges to break the grid.

No canvas, no animation.

The lattice is periodic, so one cell is a seamless tile. For a quiet texture — under code, cards, panels — skip the canvas entirely and use a repeating SVG as a plain background-image.

<script src="octagons.js"></script>
<script>
  document.querySelector('pre').style.backgroundImage =
    Octagons.pattern({
      size:    22,          // cell pitch, px
      opacity: 0.09,        // keep it barely there
      nodes:   'diamond'    // or 'octagon' / 'both'
    });
</script>

That code block is using it. Nothing is running — it is one repeating tile.

One call.

<div class="bg"></div>

<script src="octagons.js"></script>
<script>
  var og = Octagons.init('.bg', {
    mode:   'field',        // 'field' | 'lattice'
    colors: ['#33417c', '#6478da', '#b3bfff'],
    accent: '#0066ff',
    size:   110,
    bond:   0.18            // lattice: fuse neighbours
  });
</script>

Pauses when the tab is hidden. Caps device pixel ratio at 2. Cleans up after itself with destroy().