Loading craft...
Loading craft...
A customizable hexagonal pattern background component built with SVG paths. Features gradient colors, radial fade effects, and seamless tiling. Perfect for adding subtle geometric texture to any design.
I kept seeing circle, dot, and square pattern backgrounds everywhere online, but never a hexagonal one. I got curious about how these SVG-based backgrounds worked, so I started experimenting and learning the fundamentals.
The tricky part was figuring out the optimal hexagonal pattern. If you use complete hexagons, they overlap in certain places, so I had to find the right pattern that tiles seamlessly. After some trial and error, I figured out the exact arrangement that works perfectly.
Then I had to learn how to draw SVG lines using paths. Once I understood the path syntax and how to calculate the coordinates for the hexagonal grid, I built the pattern using SVG and made it tile seamlessly across any container.
| Props | Description | Default |
|---|---|---|
color | Primary color for the hexagons | #5271ff |
secondaryColor | Secondary color for gradient effect | Same as color |
cellSize | Size of each hexagonal cell | 50px |
strokeWidth | Width of the hexagon strokes | 3 |
fade | Enable radial fade effect | true |
fadePercentage | Percentage of fade effect (0-100) | 20 |
opacity | Overall opacity of the pattern (0-1) | 1 |
className | Additional CSS classes | - |
Built with SVG path patterns, inspired by geometric background designs and optimized for seamless tiling.