hexagon.js

import React from 'react';

function HexagonSvg({ attrs = {}, position: [x0, y0], length }) {
  const p1 = [-1 / 3, 0];
  const p2 = [-1 / 6, -1 / 3];
  const p3 = [1 / 6, -1 / 3];
  const p4 = [1 / 3, 0];
  const p5 = [1 / 6, 1 / 3];
  const p6 = [-1 / 6, 1 / 3];
  const M = ([x, y]) => `M ${x0 + length * x} ${y0 + length * y}`;
  const L = ([x, y]) => `L ${x0 + length * x} ${y0 + length * y}`;
  return (
    <path
      {...attrs}
      d={[M(p1), [p2, p3, p4, p5, p6].map(L).join(" ")].join(" ")}
    />
  );
}

function hexagonalPlacement(
  [x, y],
  scalar = 21,
  [centerX, centerY] = [50, 50]
) {
  if (y % 2) {
    return [
      centerX + (x + 1 / 2) * scalar,
      centerY +
        (y + (y > 0 ? -2 / 3 : 2 / 3)) * scalar -
        (4 * (Math.trunc(y / 2) * scalar)) / 3,
    ];
  }
  return [centerX + x * scalar, centerY + (y / 3) * scalar];
}

export function HexagonGrid() {
  return (
    <svg viewBox="0 0 100 100" height={500} width={500}>
      {[
        [0, -5],
        [1, -5],
        [0, -4],
        [0, -3],
        [0, -2],
        [-1, -1],
        [-1, 0],
        [0, -1],
        [0, 0],
        [0, 1],
        [1, 0],
        [1, 1],
      ].map((coord) => (
        <HexagonSvg
          attrs={{
            "data-x": coord[0],
            "data-y": coord[1],
          }}
          position={hexagonalPlacement(coord)}
          length={20}
        />
      ))}
    </svg>
  );
}