Task path / input to outcome
How to build a repeating SVG pattern
- 01
Set the canvas size
Set Width and Height from 64 to 4,096 px each, within 16 million pixels total. These dimensions set the full SVG canvas and PNG render. The SVG defines a repeating pattern inside that canvas; it is not just a standalone tile.
- 02
Choose a pattern family
Pick Dots, Grid, Diagonal stripes, Waves, or Checker under Pattern family. Each family is a bounded, tile-based system rather than a random texture, so the repeat is exact and the exported file stays small at any canvas size.
- 03
Tune the repeat
Tile size runs 8–160 pixels, Mark weight 1–16, Rotation −180 to 180 degrees, and Foreground opacity 0.05–1, with six-digit hex values for Foreground and Background. The preview updates with every change, so subtle tweaks — a slightly larger tile, a notch less opacity — are easy to compare.
- 04
Export the pattern
Copy or download the SVG canvas filled with repeated pattern units, or download its PNG render at the chosen dimensions. The internal unit repeats across this canvas, but the outer edges of the full image are not guaranteed to join seamlessly when the exported file itself is tiled.