What the SVG pattern generator makes
A small square tile with dots, circles, rings, squares, triangles, hexagons, plus signs, lines, diagonal lines, cross-hatch or waves, built so that it repeats without a visible seam. You set the spacing, the size of the shapes, a line thickness for outlined shapes, a seeded jitter that nudges each shape, the tile rotation and the colors. The preview shows the tile repeated, exactly as a browser will show it as a background. The tile is written as plain SVG with one element per shape and rounded coordinates, so a typical tile is 1 to 3 KB.
How designers use repeating patterns
- Section backgrounds: a faint dot grid or fine diagonal lines behind a pricing table or a feature row adds texture without competing with the text. Keep the opacity low, or pick a shape color close to the page background.
- Hero areas and headers: larger shapes with jitter, like the Confetti and Tumbling squares presets, give a playful backdrop. Export the repeated area at the exact size of the hero, or let CSS repeat the tile so it works at any width.
- Print and packaging: honeycombs, pinstripes and plus fields work as endpapers, wrapping paper, business card backs or the inside of an envelope. Download the SVG and place it in your layout program at any size; it never gets blurry.
- Overlays and masks: a dot or line tile in white at 10% to 20% opacity over a gradient breaks up banding and gives a screen-printed look. Rings and waves make good texture for cards and illustrations.
How a seamless tile works
Every shape sits on a grid that fits the tile exactly: with a spacing of 24 px and 2 cells per tile, the tile is 48 px wide and holds 2 columns and 2 rows. A shape that crosses the right edge is drawn again at the same height on the left edge, and the same for top and bottom, so the picture continues when the tile repeats. Jitter is seeded: the offset of each shape comes from the seed and the shape's position in the grid, so a shape that is pushed over an edge gets the same push on the other side, and the tile stays seamless at any jitter amount.
Rotation is the tricky part. A square grid turned by 45 degrees repeats along the tile edges again, but only with a tile that is √2 times larger, which is why the tile grows when you choose 45°. Other angles would never line up with a square tile, so instead the shape angle slider turns each shape in place. Hexagons use a honeycomb grid with two rows per cell, so their tile is taller than it is wide; at 90° it is simply turned on its side. Triangles alternate between pointing up and pointing down, so at 0° and 90° their tile always holds an even number of cells: with 3 cells per tile you get a tile of 4 cells.
SVG, PNG and CSS
The tile SVG is the most useful file: it is small, sharp at any zoom and on any screen density, and most design programs can fill a shape with it. The CSS puts that same SVG straight into a stylesheet as a data URL, with the tile size as background-size, and the browser repeats it in both directions by default. PNG is for the places that cannot read SVG. For a tile PNG choose a scale of 2× or 4× so the pixels stay crisp on dense screens, and set the CSS background-size to the natural tile size. The repeated area export writes one finished image at the width and height you enter, for a hero image or a slide, and the SVG to PNG converter turns any saved SVG into a PNG later.
How to use the pattern generator
- 1Choose a shape or click a preset, then set the spacing and the element size. For outlined shapes and lines, set the line thickness.
- 2Add jitter for a hand-placed look and raise the cells per tile so the jitter does not repeat too soon. Shuffle the seed until you like the arrangement.
- 3Turn the shapes with the shape angle, or the whole tile by 45° or 90°, and pick the shape color, a background color or transparent, and the opacity.
- 4Switch on the tile edges to see where the tile repeats, then download the tile as SVG or PNG, export a repeated area at a fixed size, copy the SVG code, or copy the CSS and paste it into a stylesheet.
Frequently asked questions
What makes a pattern tile seamless?
The content must continue across the edges: whatever leaves the tile on the right has to come back in on the left, and the same from bottom to top. This generator builds every tile from a grid of positions that repeats exactly with the tile, and it draws every shape that touches an edge on both sides. Jitter is tied to the seed and to the grid position, so a shape that is pushed over the edge is pushed the same way on the opposite side.
Why can I only rotate by 0, 45 and 90 degrees?
A square grid turned by an arbitrary angle no longer lines up with a square tile, so the pattern would break at the seams. At 45 degrees the grid repeats along the tile edges again, with a tile that is about 1.41 times larger. At 90 degrees the tile is simply turned. For any other look, rotate the shapes themselves with the shape angle slider, which keeps the grid and therefore the seams untouched.
Should I download the tile or the whole area?
Take the tile when you want a CSS background or a repeating fill in a design program: it is tiny and repeats forever. Take the area when you need one finished image, like a hero background or a poster backdrop, at the exact pixel size of the place it goes.
SVG or PNG?
SVG is a vector file: it stays sharp at any size and on any screen density, and a tile is often under 2 KB. Use it for websites, apps and print. PNG is a fixed grid of pixels; use it for tools that cannot read SVG, like some presentation and video programs, and export it at the size you need or larger.
How do I use the CSS?
Paste the copied lines into the rule of the element that gets the background, for example body or a section. The background-image line holds the tile as a data URL, background-size sets the tile to its natural pixel size, and the browser repeats it in both directions. If you set a background color, it is written as background-color so the SVG itself can stay transparent.
Can I change the pattern later?
Yes. Copy link saves every setting, including the seed, in the address, so the same link always opens the same pattern. Keep it with your design notes and come back to adjust a color or the spacing.