SVG Pattern Generator

What this SVG pattern generator does

It builds a seamless, repeating background pattern and hands it to you as a standalone SVG you can copy, download, or drop straight into a website, a slide, or a design file. Because the output is a real SVG <pattern> — not a screenshot — it stays crisp at any size and weighs only a few hundred bytes. There is no account, no watermark, and nothing is uploaded: the pattern is generated in your browser (and, on the API, in a pure function) from the settings you choose.

The twelve pattern types

Pick a shape and the tool draws it into a repeating tile:

• Dots — evenly spaced circles.
• Lines (Horizontal) and Lines (Vertical) — simple stripes.
• Diagonal Lines — 45° stripes that wrap cleanly at the tile edge.
• Grid — crossing horizontal and vertical lines.
• Chevron / Zigzag — a repeating V.
• Hexagons — a honeycomb lattice (the tile is shorter than it is wide by the natural √3⁄2 ratio, so the cells interlock).
• Triangles, Diamonds, and Crosses — outlined geometric motifs.
• Waves — a smooth sine-like curve.
• Checkerboard — alternating filled squares.

Settings

• Foreground and Background colours — any hex colour, via the pickers.
• Stroke / element size — how thick each line, or how large each dot, is drawn.
• Spacing — the size of each repeating tile, in pixels. Smaller spacing = a denser pattern.
• Opacity — fades the pattern over the background, from 10% to fully opaque.
• Rotation — spins the whole tile by any angle, so stripes and grids can run at a slant.

How to use it

1. Choose a pattern type.
2. Adjust the colours, spacing, stroke, opacity, and rotation until the live preview looks right.
3. Copy the SVG source, or download it as a .svg file.

The generated markup is a full <svg> document with an embedded <pattern> painted across an 800×600 canvas via fill="url(#svgPattern)". You can use the file as-is, or lift the <pattern> and <defs> block into your own SVG and reference it wherever you need a fill.

Turning it into a CSS background

Because the pattern tiles seamlessly, you can also use it as a CSS background-image: URL-encode the SVG and set background-repeat: repeat. The tile dimensions equal your chosen spacing, so the browser repeats it edge to edge with no visible seam.

Is it private?

Yes. Everything runs client-side in the browser — no image, colour, or setting is ever sent to a server. The same pure generator also powers the free developer API, which returns the identical SVG string for a given set of inputs.