Hexagon tiling

육각형 타일링

One of only three regular polygons that tile a plane with no gaps or overlaps — and there's a proven mathematical reason bees build with this one.

Also known as: 허니콤 패턴Honeycomb grid
···
html
<div class="wrap"><svg viewBox="0 0 180 208" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
  <defs>
    <polygon id="hex" points="20,0 10,17.32 -10,17.32 -20,0 -10,-17.32 10,-17.32"/>
    <pattern id="hx" width="60" height="34.64" patternUnits="userSpaceOnUse">
      <rect width="60" height="34.64" fill="#f2f6f3"/>
      <g fill="none" stroke="#2f7d5c" stroke-width="1.6">
        <use href="#hex" x="-60" y="-34.64"/>
        <use href="#hex" x="-60" y="0"/>
        <use href="#hex" x="-60" y="34.64"/>
        <use href="#hex" x="0" y="-34.64"/>
        <use href="#hex" x="0" y="0"/>
        <use href="#hex" x="0" y="34.64"/>
        <use href="#hex" x="60" y="-34.64"/>
        <use href="#hex" x="60" y="0"/>
        <use href="#hex" x="60" y="34.64"/>
        <use href="#hex" x="-30" y="-17.32"/>
        <use href="#hex" x="-30" y="17.32"/>
        <use href="#hex" x="-30" y="51.96"/>
        <use href="#hex" x="30" y="-17.32"/>
        <use href="#hex" x="30" y="17.32"/>
        <use href="#hex" x="30" y="51.96"/>
        <use href="#hex" x="90" y="-17.32"/>
        <use href="#hex" x="90" y="17.32"/>
        <use href="#hex" x="90" y="51.96"/>
      </g>
      <animateTransform attributeName="patternTransform" type="translate" from="0 0" to="60 0" dur="11s" repeatCount="indefinite"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#hx)"/>
</svg></div><span class="tag">hexagon tiling</span>
css
.wrap{position:absolute;inset:0;overflow:hidden}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(30,60,45,.82);
  color:#f2f6f3;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

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.