Your own artwork,
repeating with no seam to find
Set a field in millimeters and drop an SVG onto it. What crosses an edge arrives on the opposite one, so the tile that comes out repeats forever — in Illustrator, in a browser, on cloth. Free: every repeat
- Seamless by construction.
- Nothing crosses an edge and stops. What leaves the right side arrives on the left, so there is no seam to repair later.
- Four repeats.
- Straight, half drop, half brick and mirror — the offsets a designer reaches for the moment a grid starts reading as rows of dots.
- A strew that holds.
- Spacing is measured on the pattern, not on the field, so nothing collides across the seam and no edge goes bald.
- Your files, not a library.
- It repeats what you drop on it. Nothing here decides what your motif should look like.
- One color or the file’s own.
- Force a piece to a single ink, or leave the artwork exactly as it was drawn. Per piece, not per file.
- Vector out.
- An SVG tile at true size in millimeters, a PNG at the resolution you pick, and a page filled with the repeat.
What it makes
Six things it does that an offset filter does not
Nudging a layer by half the canvas and patching the middle is how this was done for twenty years. It is also why the patch is always visible.
Whatever leaves an edge comes back on the other one
- A motif over the edge is drawn on both sides, live, as you drag it
- Drag it past the edge and it is simply at the other side — no offset step
- Click either half: it is one motif and it has one set of handles
- The neighboring tiles are shown faint around the field, so the seam is never imagined
Straight, half drop, half brick and mirror
- The repeat decides which neighbor a motif arrives in, and it is chosen before anything is composed
- Half drop and half brick break the rows the eye finds in a plain grid
- Mirror is seamless whatever is on the field, at the price of an axis of symmetry
- Each one is exported as the rectangle it closes in, so the file tiles plainly anywhere
The hour of placing motifs by hand, skipped
- Count, size, spread of size, turn and mirror, all on dials
- Minimum spacing measured across the seam as well as inside the field
- Seeded: the same number gives the same strew, and a different one gives another
- Or set the artwork out in rows, and move what you want by hand
Recolor a piece, or leave the file as it is
- Every color in a motif forced to one ink, per placement
- The same motif twice in two inks is two pieces, not two files
- Opacity per piece, for the depth a flat repeat lacks
- A ground under the artwork, or none at all for a transparent tile
Millimeters, and the tile that actually comes out
- The field is set in millimeters and the file is written in them
- The panel says what the exported tile measures, which is not always the field
- Motif width in millimeters, so it does not change when the field does
- Positions are proportional: resize the field and the composition scales with it
An SVG tile, a PNG, and a sheet of it
- SVG: vector, at true size, one copy of each motif referenced as many times as needed
- PNG: at the resolution you pick, carrying its own size so it opens at the right scale
- PDF: a page filled with the repeat, for wrapping paper or a liner
- Nothing is uploaded — the files are read and written in your browser
In detail
The field, the repeat, the strew and the file
One idea, four ways of applying it, and a file at the end that tiles anywhere.
The field
- Any size in millimeters, from a 10 mm stamp to a 500 mm panel
- A ground in any color, or none for a transparent tile
- Neighboring tiles shown faint around the working field
- A repeat view that tiles the pattern across the whole screen — the proof, not a claim
The repeats
- Straight: the plain grid
- Half drop: every column dropped by half a field
- Half brick: every row shifted by half a field
- Mirror: alternate cells reflected, seamless for any artwork at all
The artwork
- SVG in, with its ids renamed so two files never share a clip path
- Anything that could run a script is stripped before it reaches the page
- Move, size and turn on the field, with the turn held to fifteens
- Recolor, mirror and fade any single placement
Out
- SVG tile at true size in millimeters
- PNG at 72–600 dpi, with its physical size written in
- A PDF sheet on A4, A3, A2, SRA3 or Letter
- Named after the artwork, the tile size and the repeat
How it works
Four steps, and the third is optional
A repeat takes a field, some artwork and a decision about how the copies sit. Everything else is arranging.
Set the field
How big the tile is, in millimeters, and which repeat the copies follow.
Drop the artwork
One SVG or several. Each one lands on the field as it arrives.
Strew or place
Scatter them with the dials, or drag each piece where you want it. Anything over an edge continues on the other side.
Take the file
The SVG tile, a PNG at your resolution, or a page filled with the repeat.
Who it is for
Anywhere a pattern has to run on and on
Anything printed by the meter, and anything filled by a swatch.
Gift wrap and tissue
A sheet of the repeat on A2, or the tile for a converter to step and repeat themselves.
Textile and apparel
Half drop and half brick are the two repeats a print house will ask you for by name.
Packaging
A box wrap, a bag, a liner, a tube — the surfaces that are never the same size twice.
Surface and stationery
Endpapers, notebook covers, wallpaper mock-ups, wrapping for a brand.
Print and prepress
A vector tile in millimeters with no text and no linked pictures — one file that separates.
Screens
A PNG or SVG that tiles as a CSS ground with nothing else to set.
Questions
What it does, and what it will not do
Is the pattern really seamless?
Yes, and not by inspection: a motif crossing an edge is drawn on both sides from the same numbers, so the two halves cannot disagree. The repeat view tiles the finished file as an ordinary background — if a seam showed anywhere, it would show there.
What can I drop on it?
SVG. That is the only format that stays exact at any size, and a pattern is a thing that gets scaled. If your motif is a photograph or a scan, trace it first — the Converter here will do that — and drop the result.
Why is my half drop tile twice as wide as the field?
Because that is the smallest rectangle in which a half drop closes on itself. The file has to tile by plain translation — that is all a swatch, a CSS ground or a step and repeat can do — so the export gives you the rectangle that does. Half brick comes out twice as tall for the same reason, and mirror twice both ways.
Is the PDF vector?
No. The SVG is vector and always will be; the PDF sheet holds the tile as a picture at the resolution on the panel, drawn as many times as the page needs. Filling a page with vector copies of an arbitrary dropped file would mean interpreting SVG ourselves, and an interpreter that quietly drops a gradient is worse than an honest raster. For anything that will be printed large, take the SVG.
Do my files leave my computer?
No. The file is read in the browser, drawn in the browser and written in the browser. Nothing is uploaded, and there is no account to make.
Can it invent the motifs for me?
No, and that is deliberate — it repeats what you drop on it. If you want patterns generated from nothing, that is Patterner, which draws sixteen families of line work here on the same site.
Why does the mirror repeat look so symmetrical?
Because it is: alternate cells are reflections, which is exactly why it tiles whatever you put on it, including a photograph that would never wrap by itself. If the symmetry reads as heavy, use half drop and compose across the seam instead.
The PNG has a faint line along the tile edge.
That is antialiasing at the cut, and it only happens on a transparent ground: each side of a shape crossing the seam is drawn at partial coverage and the two halves add up to slightly less than solid. Give the tile a ground, or take the SVG, where there is no pixel to be half covered.
Make a repeat with no seam to find
Drop your artwork on a field and drag it over the edge. It is already on the other side.