Welcome to PatternMaker
Build seamless repeating patterns right in your browser — no sign-up, nothing to install, and your work auto-saves to this device.
Everything you compose lives inside a single repeating tile. Whatever you place in the tile repeats edge-to-edge to form an infinite, seamless pattern.
- Left panel — the element library: shapes, icons, botanicals, blobs, text, your own SVG uploads and ready-made templates.
- Centre — the tile editor, where you add and arrange elements.
- Right panel — properties for the selected element, plus the live 3×3 preview of your repeat.
New here? Drop in a couple of shapes from the library, drag them so they cross a tile edge, and watch the preview wrap them seamlessly.
The element library
Pick a category on the left and click any item to drop it into the tile:
- Shapes — geometric building blocks, including rectangles and ellipses you can stretch to any proportion.
- Lines — straight, dashed, dotted, double, zigzag, wavy and arrow lines. Stretch for length, rotate for any angle, and use Stroke Width for thickness.
- Icons — a searchable line-icon set.
- Animals & Food — solid animal and food motifs you can recolour with the fill picker, just like shapes.
- Stickers — colourful ready-made animal & food emoji. These keep their own colours (the fill picker doesn't recolour them).
- Botanical — leaves and organic motifs.
- Blobs — soft, freeform shapes.
- Text — type your own words as a vector element.
- Upload — bring in your own
.svg artwork.
- Templates — start from a finished pattern and edit it.
Editing elements
- Move — drag any element, or nudge it with the arrow keys (hold Shift for 10px steps).
- Resize — drag a corner handle to scale, or a side handle to stretch just one dimension (square → rectangle, shape → line). Hold Shift on a corner to keep the aspect ratio.
- Exact size & position — type precise W, H, X and Y values in the properties panel.
- Rotate — drag the top handle.
- Recolour & restyle — use the properties panel for fills, gradients, stroke colour/width, stroke style (solid, dashed or dotted) and opacity.
- Layer, rename, duplicate & delete — reorder with the layers list, rename a layer by double-clicking its name (or the pencil button), duplicate with Ctrl/Cmd+D, remove with Delete.
- Select several at once — Shift/Cmd-click elements (or layers), or drag a box around them on empty canvas. Then move, recolour, align, duplicate, copy or delete them all together. Ctrl/Cmd+A selects everything.
- Copy & paste — Ctrl/Cmd+C then Ctrl/Cmd+V (works for one element or a whole group).
How seamless tiling works
The tile is repeated edge-to-edge to form an infinite pattern. Any element that crosses a tile edge — or a corner — is automatically re-drawn on the opposite side, so there are never any visible seams.
- Push elements across the edges on purpose — the wrap fills the opposite side and ties the repeat together.
- Rotated elements use their true rotation-aware bounds, so wrapping stays accurate at any angle.
- Adjust the tile width and height to control how dense the repeat is. Unlink them (the link button in the toolbar) for a non-square tile — great for stripes and tall or wide motifs.
Snap guides & grid
As you drag an element, magnetic guides help you place it precisely — and the edge guides are the secret to flawless repeats:
- Centre guides — a pink dashed line appears when an element's centre lines up with the tile's horizontal or vertical centre (50%), and snaps it exactly into place.
- Edge guides — the four tile edges are always shown faintly and brighten when an element snaps to one. Snapping to an edge places the element's centre on that edge, so it sits exactly 50% inside and 50% outside — its wrapped copy on the opposite edge meets it perfectly, with no seam. Straddling an edge at 50% (horizontally or vertically) is the trick to a clean seamless pattern.
- Grid — toggle the Grid button in the toolbar for an evenly-spaced reference grid to align and space elements consistently. It's a guide only and never appears in your export.
The live 3×3 preview redraws on every change and shows exactly what your export will produce — what you see is what you get.
The pattern also fills the canvas surround (dimmed) so you can preview the repeat in context. Use the Preview button on the canvas to toggle a full-bleed, full-strength view.
Exporting your pattern
- SVG — a true seamless vector pattern that scales to any size with no quality loss. Best for print and design tools.
- PNG — the pattern tiled across a high-resolution canvas, free at every size: 1000px, 2000px, 4000px and 8000px. Tick Transparent background in the size menu to export with no background (alpha) — ideal for overlaying the pattern on other artwork.
Use the caret next to the PNG button to choose a size or turn on a transparent background. Each export confirms with a toast showing the saved filename.
Product mockups
Click Mockups in the top bar to preview your pattern on products — a t-shirt, mug, tote bag, throw pillow, phone case and framed print. Download any of them as a high-resolution PNG to show your design in context.
Save & open projects
SVG and PNG are finished artwork. To keep editing later, use Save in the toolbar to download an editable project file (.json) containing every element, the tile size and the background. Use Open to load one back in and carry on exactly where you left off — handy for backups or moving work between computers.
Your pattern auto-saves to this browser as you work, but exporting an image (SVG/PNG) or saving a project file is the way to keep a permanent copy.
Keyboard shortcuts
| Ctrl/Cmd Z | Undo |
| Ctrl/Cmd Y or Ctrl/Cmd ⇧ Z | Redo |
| Ctrl/Cmd D | Duplicate selection |
| Ctrl/Cmd C / V | Copy / paste selection |
| Ctrl/Cmd X | Cut selection |
| Ctrl/Cmd A | Select all elements |
| Shift / Cmd + click | Add / remove from selection |
| ↑ ↓ ← → | Nudge selection (hold Shift = 10px) |
| Shift + drag corner | Resize keeping aspect ratio |
| Delete or ⌫ | Delete selected element |
| Esc | Deselect / close this guide |
Tips
- Up to 40 undo steps are kept, so experiment freely.
- Pattern Information shows your live tile size, element count and the distinct colours in use.
- New Pattern clears everything for a fresh start (behind a confirmation).
- Work is saved to this browser only — export an SVG or PNG for anything you want to keep.
