SVG Background Pattern Generator
Pick a pattern — stripes, dots, grid, checkerboard, diagonal lines, waves, or turbulence-based noise — tune its colors, tile size, weight, and rotation, and take the result three ways: a copy-ready CSS background-image data URI, the raw SVG markup, or an SVG file download.
Pattern settings
Tiles repeat seamlessly at 0°, 90°, 180°, and 270°; other rotations can show a faint seam at tile edges on some patterns.
Use the pattern
CSS background-image
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%3E%3Cdefs%3E%3Cpattern%20id%3D'p'%20width%3D'24'%20height%3D'24'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%20fill%3D'%231e88e5'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'%23ffffff'%2F%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23p)'%2F%3E%3C%2Fsvg%3E");Raw SVG
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><defs><pattern id='p' width='24' height='24' patternUnits='userSpaceOnUse'><circle cx='12' cy='12' r='3' fill='#1e88e5'/></pattern></defs><rect width='100%' height='100%' fill='#ffffff'/><rect width='100%' height='100%' fill='url(#p)'/></svg>
Put this pattern behind a design in Moda
Patterns shine as backdrops — drop yours behind social posts, slides, and site sections.
Try Moda free →Why SVG beats PNG for background patterns
A pattern tile described as SVG is a few hundred bytes of markup that stays razor-sharp at every zoom level and screen density, where a PNG tile ships fixed pixels that blur on retina displays and cost more bytes as the tile grows. Because the SVG here is embedded directly in your CSS as a data URI, it also costs zero extra HTTP requests and inherits none of the caching complexity of an image asset. Recoloring is a text edit — change two hex values instead of re-exporting an image.
How the tiles stay seamless
Each generated SVG is one tile whose edges are constructed to continue into the next repeat: stripes and grids align to the tile boundary, the wave path ends at the same height it starts, and the noise pattern uses SVG turbulence with stitchTiles="stitch", which is the filter primitive’s built-in seam-removal mode. Rotation is applied with patternTransform, which preserves perfect tiling at 0°, 90°, 180°, and 270°; at in-between angles most patterns still look continuous, but a faint seam can appear at tile edges — the preview shows you exactly what the CSS will do.
Using the three outputs
The CSS output is a complete background-image declaration with the SVG URL-encoded into a data URI — paste it onto any element and the browser repeats it automatically. The raw SVG is for editing: open it, change colors, add elements, or paste it into a design tool. The download gives you the same markup as a file for asset pipelines that prefer real files over inline URIs. All three encode identical bytes, so you can switch delivery method later without the pattern shifting.
Frequently asked questions
Why does the CSS data URI look scrambled?
The SVG markup is URL-encoded so characters like #, quotes, and angle brackets survive inside url("…"). Browsers decode it transparently. If you want readable markup, use the raw SVG output — it is the same pattern before encoding.
Is the noise pattern random every time?
No — it uses SVG’s feTurbulence generator with a fixed seed, so the same settings always produce the same grain. That determinism matters: your background will not change between builds or renders.
Why does rotation sometimes show a seam?
The pattern is rotated inside a square tile that the browser then repeats. At right angles the rotated pattern still meets its neighbors exactly; at arbitrary angles the geometry cannot line up perfectly at every edge for every pattern. Stick to 0°, 90°, 180°, or 270° when you need guaranteed seamlessness, or check the live preview — it tiles the pattern exactly as your page will.
Can I animate or recolor the pattern after copying it?
Yes. In the raw SVG, colors are plain fill and stroke attributes you can edit or bind to CSS variables if you inline the SVG in your HTML. Patterns delivered as data-URI backgrounds cannot be styled from outside the URI, so for hover recoloring either swap between two generated URIs or inline the SVG.