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.

What is the Geometric Pattern SVG Generator?

Generate repeating geometric SVG patterns from triangles, hexagons, squares, and diamonds with custom size and colour. Copy a tiling CSS background-image data URI or the raw SVG tile for crisp, lightweight backgrounds. It runs free in your browser on Gera Tools, with nothing uploaded.

Geometric Pattern SVG Generator

Name: Geometric Pattern SVG Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Choosing the right shape for your design

Squares produce a grid or graph-paper look. They read as structured and technical, making them a natural fit for dashboards, developer tools, and data-heavy applications. Outline mode at low opacity gives a classic “notebook” texture.

Hexagons have strong connotations with technology, science, and natural structures (honeycombs). A hexagon grid in outline mode is one of the most recognizable patterns in contemporary UI design and works well for hero sections and product backgrounds.

Triangles feel more dynamic and directional than the other shapes. A filled triangle grid has strong visual energy; outline mode softens it into a subtle lattice.

Diamonds rotate the square 45 degrees, which changes the perceived rhythm of the grid. Diamond grids feel slightly more decorative and are often used in fashion, luxury, and editorial design contexts.

Getting the CSS into your project

The tool outputs a background-image: url("data:image/svg+xml,...") CSS declaration with a matching background-size already set to the tile width. You can drop this directly into a style attribute or a CSS class:

.hero {
  background-image: url("data:image/svg+xml,...");
  background-size: 40px 40px;
}

The data URI is already URL-encoded for SVG, so no further encoding step is needed. For inline HTML, the raw SVG is also available to embed directly with <svg> tags.

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.

To layer a geometric pattern behind a gradient, put the pattern as the second background-image value and the gradient as the first — CSS stacks backgrounds in declaration order with the first one on top.

SVG patterns are also a lightweight alternative to CSS mask-image effects for creating textured buttons or cards: set the pattern’s background color to transparent and overlay it on a solid-color element to achieve a subtle texture without reaching for a raster image or external asset.