hex pattern for branding
A hexagonal pattern is not a free-form mosaic: rows and columns follow a specific grid geometry, where the vertical distance between rows equals the hexagon's height multiplied by 3/4. This generator starts from a pointy-top hexagon with a 32px radius, calculates that spacing automatically, and hands back ready-to-paste CSS.
Over a near-black #0a0a0a background, the mint stroke at 0.06 opacity still leaves any white or light text placed over it well above the 4.5:1 minimum contrast ratio, so the hexagon reads as a subtle brand mark, not as noise.
Doubling the radius from 32 to 64px also doubles the height to 128px and the proportional vertical spacing to 96px (128 times 3/4), the recommendation for large backgrounds where a small hexagon would create excessive repetition.
With no stroke, a filled hexagon at 0.04 opacity creates an even softer texture than the outlined version, because a solid light area has less luminance variation from one pixel to its neighbor than a thin line does.
For simple geometry, usually yes: it scales without losing sharpness, stays editable and is often lightweight. For photographic textures or very dense noise, an optimized PNG/WebP may be more efficient.
Because pointy-top hexagons partly nest into each other: the top point of a hexagon in the row below slides into the gap left by the bottom point of the hexagon in the row above, and that overlap consumes exactly one quarter of the total height, leaving 3/4 as the effective distance between centers.
For background texture behind text, a radius between 24px and 40px usually balances brand presence with restraint; above 64px the hexagon already dominates the composition visually and works better as an isolated decorative element than as a full-page texture.
Yes, for the pointed fit to work: with a 55.4px width on a 32px radius hexagon, the offset has to be exactly 27.7px, because any other value makes one row's vertex fall outside the previous row's gap and opens a visible seam.
Not with the roles unchanged: on a flat-top hexagon, the width plays the role the height played on the pointy-top version, times 3/4, while the height becomes what the width was; switching orientation means recalculating which dimension carries that 3/4 factor.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 128" role="img" aria-label="Pattern preview"><defs><pattern id="p" width="32" height="32" patternUnits="userSpaceOnUse"><circle cx="16" cy="16" r="2.8" fill="#3DDC97"/></pattern></defs><rect width="100%" height="100%" fill="#101412"/><rect width="100%" height="100%" fill="url(#p)"/></svg>The pattern is generated locally and does not use a backend.