SVG Repeat Pattern Generator

What it is for

Make a repeating vector pattern for a background, illustration or design mockup. Choose dots, squares, diamonds, horizontal or vertical stripes, or checkerboard, set the tile spacing and mark size, and download a self-contained SVG. The canvas dimensions determine the visible output; the same tile repeats regardless of canvas size.

Worked example

Choose Dots, a width of 672 px, height of 480 px, spacing of 48 px and mark size of 16 px. Enter #264F59 for the marks and #F5EEDD for the background, with mark opacity set to 1. The tool answers "Created a repeating dot pattern with 48 px spacing." The metrics show a tile spacing of 48 px, a mark size of 16 px and a 672 × 480 px canvas, and the result reports a tile origin of (16, 16): the 16 px dot is centered in its 48 px tile. Because 672 and 480 are both whole multiples of 48 (14 × 10 tiles), there is no warning, and the downloaded SVG repeats cleanly as a background tile.

Now try Vertical stripes on a 640 × 480 px canvas with 64 px spacing, a 24 px band, #8A3B2E marks on #FFF8EC and opacity 0.8. The origin becomes (20, 0), because a vertical band starts (64 − 24) / 2 = 20 px from the tile edge and runs the full tile height. This time the tool warns that the 640 × 480 px canvas is not a whole multiple of the 64 px spacing: 480 / 64 is 7.5, so the last row of tiles is cut in half.

How to read the result

The output includes SVG markup, the tile size, the mark size and the mark origin: the top-left corner of the motif's bounding box within the tile (for a checkerboard, the first of its two squares). The tile uses SVG user-space units, so spacing is measured in canvas pixels. The file contains one pattern definition and a rectangle filled by it. A warning appears when the canvas is not a whole number of tiles.

Tips and common mistakes

• Mark size cannot exceed spacing. At equal size, marks touch the edges of each tile.
• For stripes, mark size controls band thickness and spacing controls the distance between consecutive bands. Each band crosses the tile edge to join its neighbors.
• A checkerboard uses two equal squares in opposite quarters of a tile. Its mark size cannot exceed half the spacing; with even spacing, use exactly half for an edge-to-edge checkerboard, or a smaller size to leave gaps. Odd spacing cannot be halved into whole-pixel marks.
• The canvas can crop a partial tile at its edge. To export a repeatable rectangular swatch, use dimensions that are exact multiples of spacing; the tool warns you otherwise.
• Colors use six-digit HEX values. Only the background accepts none.
• The file holds one motif in an SVG pattern definition, so editing it changes every repeat.
• Some SVG importers do not support pattern fills; test the target application.

FAQ

Is the whole downloaded image a seamless tile?

The pattern repeats inside the SVG canvas, but the canvas can end partway through a tile. To use the entire downloaded image as a repeated rectangular swatch, choose both width and height as multiples of the spacing: with 40 px spacing, 400 × 240 px holds ten by six complete tiles, while a 410 px width ends ten pixels into another tile and shows a seam.

Can I place the pattern over an existing image?

Yes. Enter none for the background; unpainted areas stay transparent, and an opacity below 1 lets the design show through the marks too.

Does the tool upload my own images?

The generator accepts shape settings and colors; it does not take an image upload or contact a third-party pattern service. The generated SVG consists of shape geometry, validated colors, and a local reference to its pattern.