SVG Pattern Generator

Generate a tileable SVG background pattern, and copy it as CSS or download the tile.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

SVG Pattern Generator draws one square tile — dots, grid, lines, vertical lines, diagonal lines, crosshatch, checker, plus, zigzag or triangles — and hands back three forms of it: the tile on its own as an SVG file, a ten-by-ten block showing the same tile repeated, and a CSS declaration carrying the motif inline as a data URI with background-size already matched to the tile. Nothing has to be hosted, no extra request is made, and the pattern stays sharp at any zoom because it is geometry rather than pixels.

Tile size does double duty here: it is both the artboard and the spacing. Dots at 24 px means one dot every 24 px, centred in its square, and moving to 40 px spreads them further apart rather than making them bigger. The stroke and dot control is separate, and for dots it is the radius — a value of 2 draws a circle 4 px across. It is capped at half the tile, so the stroke stops thickening once it would fill the square. Grid is the one motif that rules its lines along the tile's own top and left edges, so the outer half of every line falls outside the viewport and is clipped away: ask for 8 px there and the ruled lines come out 4 px wide — evenly, everywhere, because each line is drawn once per tile. Opacity applies to the whole motif as a single group, which is why crosshatch stays one even tone instead of darkening where the two diagonals cross, and the background behind it is left at full strength.

What the tool will not do is worth stating plainly. Those ten motifs are the whole set: you cannot supply your own shape, import a symbol, or choose an angle, and the diagonals are fixed at 45°. Each pattern is one colour on one background — no gradients, no second accent, no per-element fills. Checker and triangles are solid shapes derived from the tile size alone, so the stroke and dot value has no effect on either of them. The output is vector only, SVG markup plus a CSS declaration, with no raster export. All of it is generated in this browser tab from the settings you choose, so nothing is transmitted or stored and the page keeps working with the network off.

How to use it

  1. Choose a motif and a tile size. Ten patterns in the dropdown, and a tile between 4 and 512 px. Remember that the tile is the spacing — enlarge it to spread the motif out, not to make it heavier.
  2. Set the weight, colour and opacity. Stroke and dot size runs from 0.25 to 40 px, but never exceeds half the tile. Both colour fields are swatch pickers, so hex is what they hand over; rgb(), hsl() and CSS colour names have to come in as overrides. Opacity spans 5 to 100% and affects only the motif.
  3. Or type the settings as overrides. Typing here is optional. "field: value" lines — pattern, size, weight, color, opacity, background, transparent — override the controls, and a field it does not recognise is refused by name rather than ignored.
  4. Press Run, then take the form you need. The preview redraws with the tile repeating across it, the CSS declaration and the tile markup appear below, and two files are offered: pattern-<motif>-<size>.svg and the ten-by-ten sheet.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

A textured band behind a section

Diagonal lines or dots at low opacity break up a flat block of colour, and because the tile travels inside the stylesheet as a data URI there is no image file to deploy and keep in step.

Graph paper behind a canvas or note field

The grid motif at 16 or 24 px gives a drawing surface a sense of scale, and the same declaration scales with a zoom control by changing background-size alone.

A transparency backdrop

Checker with the background left visible is the conventional way to show that the pixels above it are see-through, in an image preview or a colour picker.

An empty state or a placeholder block

A hatch of diagonal lines reads as deliberately blank, which is more informative than a grey rectangle when a panel has nothing in it yet.

Questions

Does the tile get uploaded anywhere?
No. The pattern is built in this browser tab from the settings and whatever overrides you typed, so no file is transmitted or stored and the tool still runs with the network disconnected.
How do I change the gap between the dots?
By changing the tile size. There is no separate spacing control: each tile holds one motif, so the tile size is the repeat distance. A tighter grid means a smaller tile, not a smaller dot.
Why has the stroke stopped getting thicker?
It is clamped to half the tile size. On a 24 px tile the stroke will not go past 12 px however high the control is set, because beyond that the motif would simply fill its own square.
Can I rotate the pattern, or use my own shape?
Not from the controls — the motif list is fixed and the diagonals sit at 45°. The exported tile is ordinary SVG markup, so adding a transform or replacing the path by hand is the way to go past what the settings offer.
Does the seamless SVG actually tile without a visible join?
For nine of the ten it does, and diagonal lines shows how: alongside the main corner-to-corner stroke it draws two short segments that overhang the tile, so the line continues cleanly into the neighbouring tile, and the SVG viewport clips whatever falls outside. Zigzag is the exception — the peak that lands on the tile edge is two cut stroke ends meeting, not the rounded join used inside the tile, so at a heavy stroke it sits a few pixels shallower than the peaks either side of it.
Why does the downloaded tile look different from the CSS?
The CSS keeps the two layers apart — background-color for the backdrop, background-image for the motif — while the downloaded tile has the backdrop baked in as a filled rectangle. Tick Transparent background and both drop the backdrop entirely.
Should I run the result through an optimiser?
There is nothing to strip. This markup is generated rather than exported from a drawing application, so it carries no editor metadata or unused definitions — SVG Optimizer is for files that came out of Illustrator, Figma or Inkscape.

Related tools