SVG pattern generator — seamless tiles and CSS backgrounds

How to use the SVG pattern generator

1. Pick a Pattern: dots, grid, diagonal, horizontal, zigzag, hexagons, checkerboard, crosses, triangles or waves.
2. Set Tile size (6–120 px). This is the distance between repeats.
3. Set Line / dot size (0.5–12). For dots, the dot radius is 1.5 times this number.
4. Choose a Pattern colour and a Background, and lower Opacity for a subtler texture.
5. Copy the CSS (tileable background) line, or download pattern.svg or the Single tile.

What it does and when to use it

Repeating patterns add quiet texture to empty areas: a dotted grid behind a product screenshot, faint diagonal lines on a banner, or hexagons on a slide title. A pattern built from a small SVG tile is tiny compared with a large photo and stays sharp on high-resolution screens.

You get three outputs. The preview is a 400 × 240 SVG with a <pattern> element that fills the whole rectangle. The CSS output is one background-image line with the tile embedded as a data URL. The single tile is the smallest piece that repeats, for design apps that tile images themselves.

For shapes placed at random rather than in a strict repeat, use the geometric pattern generator. For pure-CSS patterns made with gradients instead of SVG, see the CSS pattern generator. For a fine grain rather than shapes, try the noise texture generator.

How it works

Each pattern type is drawn by a fixed recipe inside one tile, using your size and stroke values. The tile goes into an SVG <pattern> with patternUnits="userSpaceOnUse", so it repeats at its real pixel size. For the CSS version, double quotes become single quotes and characters such as <, > and # are percent-encoded. Base64 is not used, which keeps the string shorter and still readable. The tool needs no seed, because nothing is random: the same settings always give the same code. It runs entirely in your browser.

Worked examples

Default dots. Dots, tile 24, line size 2, colour #4f46e5 on #eef2ff. The tile holds one circle, <circle cx="12" cy="12" r="3" fill="#4f46e5"/>, and the CSS starts background-image: url("data:image/svg+xml,%3Csvg.

A light grid for a layout mock-up. Grid, tile 20, line size 1, colour #cbd5e1 on white. The tile is a single corner line, <path d="M20,0 L0,0 0,20" fill="none" stroke="#cbd5e1" stroke-width="1"/>, which joins with its neighbours into a 20 px grid.

Hexagons. Hexagons with tile size 30 give <pattern id="p-…" width="45" height="52". The height is 30 × √3 ≈ 52, which lets the honeycomb repeat without a gap.

Limits and tips

• Very small tiles with thick lines can merge into a solid colour. Keep the line size well below the tile size.
• The pattern id is p plus a short code worked out from the pattern (such as p-3kf0a), so two different inline patterns on one HTML page do not clash.
• Keep body text readable on top of a pattern: low opacity and soft colours work best.