How does an SVG pattern tile seamlessly?

The generator draws a single motif inside a square tile, then sets the tile as a CSS background-image with a matching background-size. The browser repeats that one tile across the element, so the motif lines up edge to edge automatically.

Why use SVG instead of a PNG tile?

SVG patterns are vector, so they stay razor sharp on high-DPI screens and at any zoom level. A small SVG tile is also far lighter than an equivalent raster image and lets you recolour the shapes by editing a single attribute.

What is the difference between filled and outline mode?

Filled mode paints the shape solid in your chosen colour, giving a bold pattern. Outline mode draws only a stroked border with a transparent interior, producing a lighter, more subtle grid that works well behind text.

How are the hexagons calculated?

Each hexagon is built from six points placed at 60-degree intervals around the tile centre using cosine and sine, with the first point rotated to give a pointy-top orientation. The radius is set just inside the tile so the shape never clips its edges.

Can I change the spacing between shapes?

Yes, indirectly. A larger tile size leaves more empty background around each motif, increasing the apparent spacing, while a smaller tile packs the shapes tighter. Adjust the size slider until the density looks right for your layout.

Geometric Pattern SVG Generator

Repeating geometric patterns add structure to a background without the weight of a photo. This generator builds one tile — a square, triangle, hexagon, or diamond — as a tiny SVG, then hands you the CSS to tile it across any element. Vector output means it stays crisp on any display.

How it works

A single motif is drawn inside a square tile, and the browser repeats that tile via background-image plus a matching background-size:

<svg width="40" height="40">
  <rect width="100%" height="100%" fill="#0f172a"/>
  <polygon points="20,2 38,20 20,38 2,20" fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>

Hexagons are computed from six points around the tile centre at 60-degree steps; triangles and diamonds are simple polygons; squares are an inset rect. Filled mode sets a solid fill, while outline mode uses fill="none" with a stroke.

Tips and notes

For backgrounds behind body text, outline mode at low opacity reads as gentle texture rather than visual noise. Match background-size to the tile width exactly (the copied CSS already does this) so the motif never stretches. Hexagons and triangles look best with a tile size of 30–60px; smaller tiles turn dense and busy. Because the tile is plain SVG, you can also paste it inline and animate the stroke colour with CSS for a subtle hover effect.