Hexagonal Background

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.

Craft Story

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.

How to Use

1import HexagonBackground from '@/craft/components/hexagonal-background';
2
3export default function Example() {
4return (
5	<div className='relative h-screen w-full'>
6		<HexagonBackground
7			color='#5271ff'
8			cellSize='60px'
9			strokeWidth='2'
10			className='absolute inset-0'
11			fade={true}
12			fadePercentage={30}
13			opacity={0.3}
14		/>
15		<div className='relative flex h-full items-center justify-center'>
16			<h1 className='text-6xl font-bold'>Your Content</h1>
17		</div>
18	</div>
19);
20}

Props

Attribution

Built with SVG path patterns, inspired by geometric background designs and optimized for seamless tiling.