About the SVG Pattern Generator
This SVG pattern generator makes seamless, repeating background patterns from a single tiny tile. Choose a style — polka dots, grid lines, horizontal, vertical or diagonal stripes, crosshatch, checkerboard, zigzag, waves or plus signs — then set the tile size, line thickness and two colours. You get ready-to-paste CSS with the SVG embedded as a data URI, the raw SVG markup, and a downloadable tile.
It is for web designers adding subtle texture to sections and cards, developers who want a pattern without an image request, and anyone making slide, poster or packaging backgrounds. Because the tile is vector, it stays razor-sharp on high-density screens and usually weighs only a few hundred bytes.
Every tile is designed so its edges line up when repeated, so the pattern has no visible seams at any size. The coverage figure tells you how much of the surface the foreground colour fills, which helps keep busy patterns subtle behind text.
How to use the svg pattern generator
- 1Choose a pattern style.
- 2Set the tile size — smaller tiles make a finer, denser texture.
- 3Adjust the dot radius or line thickness.
- 4Pick the pattern and background colours.
- 5Copy the CSS into your stylesheet, or download the SVG tile.
Formula and method
Each pattern is a single square SVG tile S pixels wide that the browser repeats with background-image. Shapes are positioned so anything leaving one edge re-enters on the opposite edge — diagonal stripes draw three line segments so the corners join up, and zigzags and waves continue half a period past each side so their strokes meet cleanly — which is what makes the repeat seamless.
Coverage is the share of the tile painted in the pattern colour. It is exact for dots, grids, stripes, checkerboards and plus signs; diagonal stripes 45° apart have a perpendicular spacing of S ÷ √2, giving √2 t ÷ S. For zigzags and waves it is estimated as line length × thickness ÷ tile area. The SVG is percent-encoded into a data URI so it can live directly inside your CSS.
- S
- Tile size in px
- t
- Line thickness in px
- r
- Dot radius in px
Worked examples
Subtle indigo polka dots
A 3px-radius dot covers π × 3² ≈ 28.27 px² of a 24 × 24 = 576 px² tile, so the pattern colour fills about 4.91% of the surface — a light texture that sits well behind content.
Hairline 32px grid
One horizontal and one vertical 1px line per 32px tile cover 2 × 32 − 1 = 63 px² (the shared corner pixel counted once) out of 1024 px², about 6.15%.
Bold diagonal stripes
Stripes at 45° repeat every 20 ÷ √2 ≈ 14.14px measured across the stripe, so a 2px line covers 2 ÷ 14.14 ≈ 14.14% of the surface.
Checkerboard
Two 20px squares fill opposite quarters of each 40px tile, so exactly half the surface is the pattern colour.
Frequently asked questions
How do I use an SVG pattern as a CSS background?+
Paste the generated CSS on any element. It sets a background colour and a background-image whose url() contains the SVG tile as a data URI, so the browser repeats it automatically.
Why use SVG instead of a PNG pattern?+
SVG tiles are tiny, stay sharp on retina screens at any zoom level, and can be edited as text. A PNG would need several resolutions to look crisp everywhere.
How do I make the pattern more subtle?+
Use colours close to each other in lightness, reduce the dot radius or line thickness, or increase the tile size. Aim for a low coverage percentage behind text.
Will the pattern show seams when it repeats?+
No. Each tile is built so shapes meet exactly at the edges. If you see faint lines at certain zoom levels, use whole-pixel tile sizes and thicknesses.
Can I animate or change the colour with CSS variables?+
Colours inside a data-URI SVG cannot read CSS variables. Regenerate the pattern for each theme, or inline the SVG with a pattern element if you need dynamic colours.