Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/hexagon-pattern.json
Copy the Source Code
Copy and paste the following code into your project:
hexagon-pattern.svelte
index.ts
Folder Structure
Folder Structure
Examples
Linear Gradient Example
Spacing Example
Dashed Stroke Example
Props
HexagonPattern
An SVG pattern component that renders repeating hexagons with configurable spacing, orientation, stroke style, and highlighted cells.
| Name | Type | Default | Description |
|---|---|---|---|
radius | number | 40 | Radius of each hexagon in the generated pattern. |
gap | number | 0 | Extra spacing inserted between neighboring hexagons. |
x | number | -1 | Horizontal offset for the SVG pattern origin. |
y | number | -1 | Vertical offset for the SVG pattern origin. |
direction | "horizontal" | "vertical" | "horizontal" | Controls whether the hexagons use a flat-top or pointy-top orientation. |
strokeDasharray | string | "0" | SVG dash pattern applied to the hexagon outlines. Use values like `4 2` for dashed strokes. |
hexagons | Array<[col: number, row: number]> | undefined | Specific grid cells to fill on top of the repeating pattern. |
class | string | "" | Additional classes merged onto the root SVG element. |