SVG Pattern Generator

Seamless patterns from a single repeating tile

A background pattern that covers a whole page is almost never a giant image — it's one small tile repeated edge to edge. This generator builds that tile as an SVG <pattern> element and lets the browser do the tiling. Because the output is vector, it stays razor sharp at any zoom or screen density, and the file is tiny: a few hundred bytes of markup instead of a bitmap. You pick one of eight geometric styles, set two colors, and adjust the tile size, rotation, and stroke width; the tool renders a live preview and hands you both ready-to-paste SVG markup and a CSS background-image rule.

The eight patterns and how they're drawn

Each pattern is a few SVG primitives positioned inside a square tile whose side length is the tile size you choose. Understanding the geometry helps you predict how a setting will look:

The background fills first with your secondary color, then the pattern paints in the primary color on top. Most patterns are outlines, so stroke width controls how heavy the lines look; dots are the exception, drawn as a solid fill.

A worked example

Pick dots, set the tile size to 40 px, and the radius becomes 40 × 0.15 = 6 px, centered in each 40-px square — so the dots sit 40 px apart center to center. Switch to stripes and set rotation to 45°: the single mid-tile line is drawn straight, but the whole pattern carries a patternTransform="rotate(45)", so it renders as evenly spaced diagonal stripes 40 px apart. Increase the tile size to 80 px and the same stripes spread twice as far apart. Every change updates the SVG and CSS output boxes instantly; the Copy buttons put either version on your clipboard.

SVG markup versus the CSS rule

The tool gives you two ways to use the result. The SVG code is a complete standalone graphic you can drop into an HTML file or save as a .svg. The CSS background wraps the same SVG into a url("data:image/svg+xml,...") data URI plus background-repeat: repeat and a background-size matching your tile. The data-URI version is handy because it needs no separate file — the pattern travels inside your stylesheet. Note the SVG is URL-encoded (not Base64), which keeps it readable and slightly smaller.

Practical tips

• Keep contrast gentle for backgrounds. A pattern meant to sit behind text should whisper, not shout. Choose a primary color only a shade away from the background so it doesn't compete with foreground content.
• Match background-size to tile size. If you copy the SVG by itself and tile it with your own CSS, set background-size equal to the tile size, or the repeat will look stretched. The CSS output already does this for you.
• Use rotation to multiply variety. The same eight shapes at 0°, 45°, and 90° read as very different textures, so try rotation before reaching for another pattern.
• Thin strokes scale better. On high-resolution screens a 0.5–1.5 stroke often looks cleaner than a heavy line, since the vector stays crisp.

Common mistakes

The first is expecting stroke width to affect the dots pattern — it doesn't, because dots are a filled circle, so change the tile size to resize them instead. The second is forgetting the data URI must stay intact: if you hand-edit the copied CSS and break the URL encoding, the background silently disappears. The third is using a tile so large that the repeat becomes obvious as tiling rather than texture; smaller tiles read as a continuous surface. Everything is generated locally in your browser, so you can iterate freely and copy the final markup with no account, upload, or watermark.