How to svg seamless pattern background generator online
- Step 1Prepare a single motif SVG — Pick one shape to repeat — a dot, cross, leaf, chevron, or logo mark. The tool tiles whatever inner markup your file contains, so simpler motifs read better at small sizes. If your motif is a multi-colour icon, tile it as-is; this tool does not recolour.
- Step 2Upload the SVG or paste its source — Drop the
.svgonto the upload area, click to browse, or paste the raw<svg>...</svg>markup into the text box below it. Pasted source must parse as valid SVG (root element<svg>) or you get an Invalid SVG error before anything runs. - Step 3Set the tile size — The Tile size slider runs 20-200px (step 5, default 60). This is the nominal width/height of the motif's cell before spacing is added. Smaller tiles = denser repeat; larger tiles = a sparser, more graphic look.
- Step 4Add spacing if you want gaps — The Spacing slider runs 0-80px (step 2, default 10). Spacing is added to the tile size to form the repeat cell, so it pushes neighbouring motifs apart without scaling them. Set it to 0 for an edge-to-edge tessellation.
- Step 5Rotate the motif for variety (optional) — The Rotation slider runs 0-360 degrees (step 5, default 0). Each tile is rotated around the point
(tileSize/2, tileSize/2)— i.e. the centre of the nominal tile — so a 45-degree rotation turns a square grid of arrows into a diagonal field. - Step 6Set a background and export — Type a CSS colour into the Background box (default
transparent; e.g.#0f172aorwhite) — it paints a rect behind each tile. Click Process SVG, check the live preview, then Download SVG or Copy to clipboard. The downloaded file is named<yourfile>-pattern.svg.
The four controls and what they do
These are the only options the tool exposes. UI slider ranges are listed first; the public-API schema accepts a slightly wider numeric range (shown in brackets) because the browser slider is intentionally narrower than the engine's hard limits.
| Control | Type | Range (UI / API) | Default | Effect on output |
|---|---|---|---|---|
| Tile size | Slider, step 5 | 20-200px / 10-300 | 60 | Sets the nominal cell width/height before spacing. Drives the <pattern width/height> together with spacing. |
| Spacing | Slider, step 2 | 0-80px / 0-100 | 10 | Added to tile size to form the repeat cell (cell = tileSize + spacing). Larger = more gap between motifs. |
| Rotation | Slider, step 5 | 0-360 deg | 0 | Rotates each tile's motif around (tileSize/2, tileSize/2). 0 = upright grid; non-zero = angled field. |
| Background | Free-text colour | any CSS colour string | transparent | Paints a <rect> behind each tile. Use a hex/named colour for an opaque pattern; leave transparent for overlay use. |
Anatomy of the generated SVG
What the tool actually writes. The output is a fixed 300x300 canvas with one <pattern> definition; the visible area is the rect painted with that pattern.
| Output element | Value / role |
|---|---|
Root <svg> | Fixed width="300" height="300" with the SVG namespace — a preview canvas, not your motif's original viewBox |
<pattern id="tile-..."> | patternUnits="userSpaceOnUse", width/height both equal to tileSize + spacing |
Background <rect> | Fills one cell with the Background colour (drawn first, behind the motif) |
<g transform="rotate(...)"> | Wraps your motif's inner markup; the transform is omitted entirely when rotation is 0 |
Painting <rect> | width="100%" height="100%" fill="url(#tile-...)" — this is what makes the pattern visible across the 300x300 frame |
| Filename | <originalstem>-pattern.svg (the input file's name with -pattern appended) |
Cookbook
Each recipe shows the input motif, the settings, and the shape of the SVG the tool writes. The output canvas is always 300x300 — scale it in CSS or change the wrapping <svg> width/height after export.
Polka-dot background from a single circle
The simplest seamless pattern: one dot, tiled. With spacing the dots sit on a clean grid; the cell is tile + spacing so the repeat is fully predictable.
Input motif (dot.svg):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="4" fill="#6366f1"/>
</svg>
Settings: Tile size 40, Spacing 20, Rotation 0, Background transparent
Generated (abridged):
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<pattern id="tile-dot" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
<rect width="60" height="60" fill="transparent"/>
<g><circle cx="10" cy="10" r="4" fill="#6366f1"/></g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tile-dot)"/>
</svg>
# cell = 40 + 20 = 60Edge-to-edge tessellation with zero spacing
Set Spacing to 0 and the repeat cell equals the tile size — motifs touch edge to edge. Ideal for a shape designed to interlock, like a chevron or triangle.
Settings: Tile size 60, Spacing 0, Rotation 0 Result: <pattern> width/height = 60 (cell = 60 + 0) No gap between tiles. If your motif's artwork extends past its own 60x60 box, neighbouring tiles will overlap — trim the motif's bounds first.
Diagonal field via per-tile rotation
Rotation turns a plain grid into a slanted field. The motif rotates around (tileSize/2, tileSize/2), so the centre stays put and the artwork pivots in place.
Settings: Tile size 80, Spacing 16, Rotation 45 Generated motif wrapper: <g transform="rotate(45 40 40)"> ... your motif ... </g> # 40 = tileSize/2 = 80/2; the pivot is the nominal tile centre
Opaque dark-mode card texture
Give the pattern a solid background so it reads as a finished surface rather than an overlay. The Background colour paints a rect behind every tile.
Settings: Tile size 50, Spacing 10, Background #0f172a Generated background rect: <rect width="60" height="60" fill="#0f172a"/> # Use any CSS colour string: #hex, rgb(), or a named colour like 'slate'
Resize the exported pattern in your page
The export is locked to 300x300. To cover a larger area, drop it in as a CSS background or change the outer width/height after export — the <pattern> itself keeps tiling regardless of canvas size.
Inline use, stretched to a hero section:
<div style="width:100%;height:480px">
<svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice"
width="100%" height="100%"> ...generated content... </svg>
</div>
# Or convert to a CSS background-image with the svg-css-data-uri tool.Edge cases and what actually happens
Pasted markup that is not valid SVG
Invalid SVGIf the text box content does not parse as XML with a root <svg> element, the tool throws Invalid SVG before tiling. Paste the complete <svg ...>...</svg>, not just a <path> snippet.
Motif with no outer <svg> wrapper
rejectedThe tiler strips the first <svg ...> and the closing </svg> to get the inner markup. A bare fragment (just <circle/>) fails the validity check on paste; for file upload it produces an empty tile because there is nothing between the tags to extract.
Motif artwork larger than the tile cell
By designThe cell is tileSize + spacing, but the tool never scales your motif to fit it. If your shape's coordinates extend past the cell, neighbouring tiles overlap. Reduce the motif's own dimensions or raise the tile size.
Spacing pushes motifs apart but never overlaps them at 0
ExpectedSpacing only adds gap; it cannot create overlap. At Spacing 0 the cell equals the tile size and motifs sit edge to edge. Overlap only happens when the artwork itself exceeds the cell (previous row).
Rotation pivot is the tile centre, not the motif centre
By designRotation uses rotate(deg tileSize/2 tileSize/2). If your motif is not centred in a tileSize-sized box, rotation will visibly orbit it off-centre. Centre your artwork in its viewBox for clean in-place rotation.
Background left as transparent
SupportedThe default transparent background means the pattern shows whatever sits behind it — perfect for overlays. The background <rect> is still written; it just paints nothing visible.
Duplicate <pattern> ids when embedding several patterns
Watch outThe pattern id is derived from the uploaded file's stem (tile-<stem>). Tiling two files with the same name and pasting both into one document yields colliding ids — rename one file before generating, or edit the id after export.
Animated or scripted motif
PreservedWhatever markup is inside your <svg> is copied verbatim into the pattern, including <animate> or inline styles. SVG patterns can render animation, but behaviour varies by browser — test before shipping.
Expecting a recoloured tile
Not supportedThere is no colour control beyond the background. Colours come straight from your motif. To recolour first, run the motif through the hex swapper, monochrome converter, or Tailwind mapper, then tile the result.
Output is fixed at 300x300
ExpectedEvery export is a 300x300 preview canvas; the pattern definition is the reusable part. Stretch it in CSS, change the outer width/height, or convert to a data URI — the <pattern> keeps tiling at any size.
Frequently asked questions
What input does the tool accept?
A single SVG file (upload or drag-and-drop) or pasted SVG source code. It must parse as valid SVG with a root <svg> element. Only one motif at a time — this is not a multi-file tool.
How does it make the pattern seamless?
It uses SVG's native <pattern> element with patternUnits="userSpaceOnUse". The browser repeats the vector motif across a grid, so there is no raster seam to retouch — the tile is mathematically continuous at any scale.
What is the repeat cell size?
The cell width and height both equal tileSize + spacing. A 60px tile with 10px spacing repeats every 70 user units. That value becomes the width and height on the <pattern> element.
Can I recolour the motif here?
No. The only colour control is the background. Your motif's own colours are preserved exactly. Recolour first with the hex swapper, monochrome converter, or Tailwind mapper, then tile the recoloured file.
Can I generate a motif from scratch?
No — this tool tiles a motif you provide. For generated artwork to tile, try the blob generator, low-poly generator, or wave divider, then feed the result in.
Why is the output always 300x300?
300x300 is just the preview canvas. The reusable part is the <pattern> definition, which tiles at any size. Stretch the outer <svg> in CSS or change its width/height to cover a larger area.
Can I offset alternating rows (a brick layout)?
No. The tool tiles on a straight square grid only — there is no half-drop or brick offset option. For a staggered look, design the offset into the motif itself before tiling.
What does the rotation actually rotate?
It rotates each tile's motif around the point (tileSize/2, tileSize/2) — the centre of the nominal tile. Centre your artwork in its viewBox so rotation spins it in place rather than orbiting it.
How do I use the result as a CSS background?
Export the SVG, then convert it to a data URI with the CSS data-URI tool or the base64 encoder, and set it as background-image. This tiler does not emit a data URI itself.
Is my motif uploaded anywhere?
No. Processing runs entirely in your browser; nothing is sent to a server. The result panel shows a 0 bytes uploaded badge to confirm it.
What file size can I tile?
The SVG file limit is 5 MB on the free tier, 50 MB on Pro, and 2 GB on Developer. Motif SVGs are almost always tiny, so this is rarely a concern.
What is the output filename?
The tool appends -pattern to your input's stem — upload leaf.svg and you download leaf-pattern.svg. The internal pattern id is tile-<stem>.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.