Hexagon Pattern

1import { useId } from "react"
2 
3import { cn } from "@/lib/utils"
4 
5interface HexagonPatternProps extends React.SVGProps<SVGSVGElement> {
6  /**
7   * The radius of each hexagon (center to vertex).
8   * @default 40
9   */
10  radius?: number
11  /**
12   * Spacing in pixels between adjacent hexagons.
13   * The tile grows by this amount while the visual radius stays fixed,
14   * so the gap is evenly distributed on all sides of each hexagon.
15   * @default 0
16   */
17  gap?: number
18  /**
19   * Offset applied to the pattern origin on the x-axis.
20   * @default -1
21   */
22  x?: number
23  /**
24   * Offset applied to the pattern origin on the y-axis.
25   * @default -1
26   */
27  y?: number
28  /**
29   * Controls the orientation of the hexagons.
30   * - `"horizontal"` — flat-top hexagons tiled in a horizontal honeycomb grid.
31   * - `"vertical"` — pointy-top hexagons tiled in a vertical honeycomb grid.
32   * @default "horizontal"
33   */
34  direction?: "horizontal" | "vertical"
35  /**
36   * SVG stroke-dasharray applied to each hexagon outline.
37   * @default "0"
38   */
39  strokeDasharray?: string
40  /**
41   * Array of [col, row] coordinates for hexagons that should be highlighted
42   * (filled) on top of the repeating pattern — mirrors the `squares` prop of
43   * GridPattern.
44   */
45  hexagons?: Array<[col: number, row: number]>
46  className?: string
47  [key: string]: unknown
48}
49 
50type HexPoint = readonly [number, number]
51 
52function hexVertexList(
53  cx: number,
54  cy: number,
55  r: number,
56  direction: "horizontal" | "vertical"
57): HexPoint[] {
58  const startAngle = direction === "horizontal" ? 0 : 30
59  return Array.from({ length: 6 }, (_, i) => {
60    const angle = ((startAngle + i * 60) * Math.PI) / 180
61    return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)] as const
62  })
63}
64 
65function hexPoints(
66  cx: number,
67  cy: number,
68  r: number,
69  direction: "horizontal" | "vertical"
70): string {
71  return hexVertexList(cx, cy, r, direction)
72    .map(([px, py]) => `${px},${py}`)
73    .join(" ")
74}
75 
76function edgeLexKey(a: HexPoint, b: HexPoint): string {
77  const [p, q] =
78    a[0] < b[0] || (a[0] === b[0] && a[1] <= b[1]) ? [a, b] : [b, a]
79  return `${p[0].toFixed(6)},${p[1].toFixed(6)}|${q[0].toFixed(6)},${q[1].toFixed(6)}`
80}
81 
82function collectUniqueHexEdges(
83  centers: [number, number][],
84  r: number,
85  direction: "horizontal" | "vertical"
86): [HexPoint, HexPoint][] {
87  const seen = new Set<string>()
88  const edges: [HexPoint, HexPoint][] = []
89  for (const [cx, cy] of centers) {
90// … truncated