SVG Pattern Generator
How to make a seamless SVG pattern. One tile, any surface.
Draw the motif, tune the tile so its edges meet to the coordinate, and wrap it in a pattern definition. However large the area you fill, the file only ever contains the tile once — usually for about two kilobytes.
This is a live SVG pattern, not a screenshot — one tile defined once and painted across the rectangle.
Six steps
How to make a seamless pattern.
Five of these are judgement. The fourth is arithmetic, and it is the one that decides whether the result is a pattern or a grid of visible squares.
- 01
Draw or generate one motif
A pattern is a single small drawing repeated. Get that drawing right on its own first — at the size it will actually tile, not zoomed in.
- 02
Decide the tile box
Pick round numbers, usually between 40 and 200 units square. Every coordinate you match later is measured against this box, so an awkward size makes the arithmetic worse for no benefit.
- 03
Push motifs over the edges
Anything that stops neatly inside the box draws the box. Let shapes run off one edge deliberately — that overhang is what hides the seam.
- 04
Match the opposite edges exactly
A shape leaving the right edge at y=40 must re-enter the left edge at y=40, to the coordinate. Duplicate the overhanging shape, offset it by exactly the tile width, and the two halves become one continuous form.
- 05
Wrap it in a pattern definition
Put the tile inside <pattern> in <defs>, give it an id, set patternUnits to userSpaceOnUse and width and height to the tile box. Then fill any shape with url(#id).
- 06
Zoom out and look for corridors
Tile it fifty times before you commit. Banding, diagonal corridors and one motif that reads too dark only appear at scale — never in the single tile you have been staring at.
The mechanism
Define once in defs, reference by URL.
patternUnits="userSpaceOnUse" is the attribute that matters: it makes width and height mean coordinates rather than a fraction of the filled shape, which is almost always what you want.
<svg viewBox="0 0 400 300">
<defs>
<pattern id="tile"
width="40" height="40"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="4.5"
fill="var(--accent)"/>
<circle cx="30" cy="30" r="4.5"
fill="currentColor"/>
<path d="M0 20 H40 M20 0 V40"
stroke="#E7E0D4"/>
</pattern>
</defs>
<rect width="400" height="300"
fill="url(#tile)"/>
</svg>Repeat systems
Five ways to lay a tile down.
| Repeat | How it works | What to watch |
|---|---|---|
| Block | Tiles line up in a straight grid. | Honest and orderly, but the eye finds the grid lines quickly. Best for geometric motifs where the grid is the point. |
| Half-drop | Every second column shifts down by half a tile. | The standard textile repeat. Breaks vertical banding without breaking the grid maths. |
| Brick | Every second row shifts across by half a tile. | Half-drop rotated. Suits wide motifs that would otherwise stack into stripes. |
| Mirror | Alternate tiles flip horizontally, vertically, or both. | Hides seams almost completely, at the cost of a visible axis of symmetry. |
| Random rotate | Each instance rotates by a different angle. | Reads organic and scattered. Costs more nodes, since each instance is its own transform. |
Making it seamless
Six rules, and one of them is arithmetic.
- 01
Motifs must cross the edge
Anything that stops neatly at the tile boundary draws that boundary. Let shapes run off one edge and reappear on the opposite one, at exactly the same offset.
- 02
Match opposite edges exactly
A shape leaving at x=100, y=40 has to re-enter at x=0, y=40 to the coordinate. Close is not close enough — close is a visible seam.
- 03
Avoid strong diagonals
A dominant diagonal repeats into a corridor the eye follows across the whole surface. Break it with a counter-element or vary the angle.
- 04
Keep the tile small
A 100 × 100 tile of a dozen shapes covers any area for a couple of kilobytes. Doubling the tile roughly doubles the file for very little extra variety.
- 05
Test at real scale
A tile that looks balanced at 400px can band badly when it is repeating fifty times. Zoom out before you commit.
- 06
Two values, then a third
Start with a ground and one motif colour. Add a third only when the pattern is already working in two.
If you want sliders
There is no tile editor on this site.
Worth saying outright, because everything ranking for this search is one. If you want a ready motif, a stroke-width slider and a copy button, these are free, instant and better at that job than we would be.
Pattern Monster
Around 460 ready-made repeatable patterns with live controls for stroke, scale, spacing and colour. Copies out as SVG, CSS or PNG under a permissive licence.
fffuel
A family of single-purpose generative tools — geometric tiles, wavy shapes, grids, grain and gradients. The most interesting output on this list if you want something less orderly.
MagicPattern
260+ shapes plus the option to feed it your own image and get a seamless repeat back, which is the one route none of the others cover well.
W3Schools
A plain generator alongside the reference documentation, which makes it the quickest way to see the markup and the result side by side.
What is left over is the case none of them serve: a motif nobody else is using. Their presets are shared by every site that reaches for them, and a preset cannot be your brand mark repeated, or a specific object drawn in a specific style. Generate that here, then do the edge arithmetic above — the tiling itself is the same work either way.
Questions
Seams, tiles and the pattern element.
- What is an SVG pattern?
- A <pattern> element holds a small tile of artwork inside <defs>, gives it an id, and then any shape can be filled with url(#that-id). The browser repeats the tile across the shape for you, so the file contains the drawing once however large the area it covers.
- How do I make a seamless pattern in SVG?
- Draw one motif inside a tile box, deliberately let shapes overhang the edges, then duplicate each overhanging shape and offset it by exactly the tile width or height so the two halves meet when the tile repeats. A shape leaving the right edge at y=40 must re-enter the left edge at y=40, to the coordinate — close is a visible seam.
- Is there a pattern generator on this site?
- Not a slider-driven one, and it is worth saying so plainly. There is no tile editor here with presets and live controls — Pattern Monster, fffuel and MagicPattern do that, free and instantly, and for most background work they are the faster answer. What this site does is generate a custom motif from a description when none of their presets is the thing you actually wanted, and give you an editor to do the edge arithmetic in.
- Can AI generate a seamless pattern?
- It can generate the motif; it cannot guarantee the seam. Tiling is an exact geometric constraint — coordinates matching to the unit on opposite edges — and a generated drawing has no reason to satisfy it. Treat what comes back as the artwork and expect to do step four yourself. Any tool promising a guaranteed seamless AI tile is either building from pre-seamed presets or hoping you will not zoom out.
- Can I turn an image into a seamless pattern?
- Attach an image up to 10 MB and it is read, described and redrawn as vector, which gives you a motif to tile — but that is an interpretation rather than a trace, and it does not make anything seamless. MagicPattern handles the image-to-repeat case directly if that is the whole job.
- Why use SVG rather than a PNG tile?
- A vector tile is a couple of kilobytes, stays sharp at any zoom, and its colours are attributes you can theme with CSS variables. A PNG tile has a fixed resolution and a fixed palette.
- How do I use it as a CSS background?
- Either reference the .svg file from background-image and let background-repeat tile it, or inline a <pattern> definition and fill a rect with it. The second gives you CSS control over the colours.
- Can the pattern respond to dark mode?
- Yes, if the fills reference CSS custom properties or currentColor. One tile, both themes, no second asset.
- What tile size should I use?
- Somewhere between 40 and 200 units. Small tiles repeat faster and read as texture; large tiles read as a composition and cost more nodes.
- Can I use these patterns commercially?
- Yes — royalty-free and unrestricted, including in surface designs, packaging and products you sell.