Hexagon Pattern
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Installation
CLI Manual
Examples
Linear Gradient
Dashed Stroke
Spacing
Usage
Props
HexagonPattern
| Prop | Type | Default | Description |
|---|---|---|---|
radius |
number |
40 |
Radius from center to vertex for each hexagon |
gap |
number |
0 |
Extra spacing between adjacent hexagons (pixels) |
x |
number |
-1 |
X offset of the pattern origin |
y |
number |
-1 |
Y offset of the pattern origin |
direction |
`"horizontal" | "vertical"` | "horizontal" |
hexagons |
Array<[col, row]> |
— | Grid coordinates of highlighted (filled) hexagons |
strokeDasharray |
string |
"0" |
SVG stroke-dasharray for outline hexagons in the repeating pattern |
className |
string |
— | Additional classes on the root SVG (for example Tailwind color utilities) |
Also accepts standard SVG attributes on the root <svg> (for example aria-hidden, role) where applicable.
Credits
- Credit to @chishiyac