# 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"`  | `horizontal` — flat-top honeycomb; `vertical` — pointy-top honeycomb                          |
| `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](https://github.com/chishiyac)