Svg Pattern Generator

SVG Pattern Generator creates repeating tiled backgrounds by defining an SVG <pattern> element filled with a single repeated shape. It offers six shape types (circles, squares, triangles, lines, crosses, diamonds) drawn as outline primitives, then tiles them across a 200x200 preview and exports the complete SVG markup for use in web pages, CSS backgrounds, or design files.

1. Pick a Pattern Type from the six button choices. 2. Adjust the Size slider (10 to 60px) to set both the tile dimensions and the shape scale. 3. Adjust the Stroke Width slider (0.5 to 6.0). 4. Use Rotation (0 to 360 degrees, in 5 degree steps) to rotate the tile via patternTransform. 5. Set the Shape Color and Background Color using the two color swatches. 6. Click Copy to copy the generated SVG to your clipboard.

The exported SVG is 200x200 with a <defs><pattern> block using patternUnits="userSpaceOnUse". The pattern width and height equal the Size value, so each tile repeats on a grid of that size. A background <rect> filled with the Background Color is drawn first, then a second <rect> filled with url(#pat) overlays the tiles. When Rotation is non-zero, the rotation is applied both as a patternTransform on the pattern and as a rotate() transform on the shape itself.