Only three regular polygons can tile a plane with zero gaps or overlaps: the equilateral triangle, the square, and the regular hexagon. Of those three, the hexagon is mathematically proven to need the least total wall length to enclose a given area (the Honeycomb Conjecture, proved by Thomas Hales in 1999) — which lines up neatly with the standard explanation for why bees evolved to build hexagonal honeycomb: it fills space using the least wax. Humans reached for the same shape independently, from Islamic geometric tiling to Roman mosaics.
There's also a practical reason modern UI and game design favour hex grids over square ones: in a square grid, diagonal neighbours sit farther away than orthogonal ones (eight neighbours, two different distances), while in a hex grid all six neighbours sit at exactly the same distance from the centre. That's the reason strategy board games like Settlers of Catan use hex maps.
To build an outline-only hex grid in CSS/SVG, split each hexagon across the edges of a rectangular tile — half a hexagon on one edge, its other half reconstructed by the neighbouring tile. It's the same trick used above for seigaiha and shippō.
When to use
Use for honeycomb/skincare packaging, strategy game maps, and dashboard or data-viz backgrounds.