Super Boring Tools

Search tools

Find a tool by name or what it does.

SVG Pattern Generator

Build a repeating SVG background from dots, lines, crosses, waves, or triangles, then copy the tile, the full SVG, or a CSS data URI.

Preview
Motif
Colors
Geometry
Output
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%229.23%22%20fill%3D%22%236366f1%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%220%22%20r%3D%229.23%22%20fill%3D%22%236366f1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2240%22%20r%3D%229.23%22%20fill%3D%22%236366f1%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%229.23%22%20fill%3D%22%236366f1%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%229.23%22%20fill%3D%22%236366f1%22%2F%3E%3C%2Fsvg%3E");

How to make a repeating SVG pattern

  1. Pick a motif

    Choose a repeating shape such as dots, lines, crosses, waves, or triangles from the motif row and watch the tiled preview update.

  2. Tune the look

    Set the foreground and background colors, then drag the scale, spacing, stroke, and rotation sliders until the pattern reads the way you want.

  3. Choose an output

    Switch between a CSS data URI background, a full standalone SVG, or just the pattern tile markup depending on where you will paste it.

  4. Copy or download

    Copy the selected output to your clipboard, or download a standalone SVG file to drop straight into a project.

Why use this tool

Five seamless motifs

Dots, lines, crosses, waves, and triangles are each drawn to tile cleanly so the background repeats without visible seams.

Full color control

Set separate foreground and background colors, or make the background transparent so the pattern layers over anything behind it.

Three ready outputs

Copy a CSS data URI background, a complete SVG document, or the bare pattern tile markup, whichever fits where you are pasting.

Live tiled preview

The preview shows the real repeating tile at your chosen size, with a checkerboard behind transparent patterns so you can judge coverage.

Private by design

Every tile is built in your browser as you adjust the controls. Nothing you make is uploaded or stored anywhere.

Free with no signup

Generate as many patterns as you like at no cost and with no account, sign in, or watermark on the output.

About this tool

The SVG pattern generator turns a small set of controls into a seamless, repeating background you can drop into any page or design. Pick one of five motifs, choose two colors, and adjust scale, spacing, stroke width, and rotation until the tile looks right. The preview tiles the pattern the same way a browser will, so what you see is what you ship.

Because the pattern is drawn as vector shapes rather than a raster image, it stays crisp at any size and weighs almost nothing. A dotted or lined tile compresses down to a short string, which is why the CSS data URI output is popular for hero sections and cards: it needs no extra network request and scales to any screen density without blurring.

Three outputs cover the common ways to use a pattern. The CSS data URI is a single background declaration you paste into a rule. The full SVG is a standalone document you can save as a file or embed inline. The tile markup is just the repeating unit, handy when you want to reference it by id from your own SVG. A transparent background lets the pattern sit over a photo, a gradient, or a solid fill you already have.

Once your pattern looks good, keep styling nearby with the CSS pattern generator, the SVG blob generator, or the gradient generator. Everything runs locally, so you can iterate freely and copy the result whenever it clicks.

Frequently asked questions

How does the pattern repeat without seams?
Each motif is drawn inside a square tile sized by the spacing control, with shapes positioned so their edges line up when the tile repeats. The browser then tiles that single unit across the whole background.
Which output should I copy?
Use the CSS data URI for a background on an existing element, the full SVG when you want a standalone file or inline document, and the tile markup when you already have an SVG and want to reference the pattern by id.
Can the background be transparent?
Yes. Turn on the transparent toggle and the tile drops its background fill so only the motif shows. The preview switches to a checkerboard so you can see exactly what will and will not be covered.
Will the pattern stay sharp when scaled up?
It will. The pattern is made of vector shapes, so it renders crisply at any size and on any screen density without the blurring you get from a stretched image.
Is anything uploaded or saved?
No. The pattern is generated in your browser as you move the controls. Nothing is uploaded to a server and nothing is stored after you leave the page.

Related tools