SVG Pattern Generator

Create seamless SVG background patterns with geometric shapes, lines, dots, and customizable colors.

Tested tool guide Tested browser tools Checked August 16, 2026

What SVG Pattern Generator does, with a checked example

Pick a motif - dots, lines, triangles, stripes - set size, spacing, and colors, and the tool returns an SVG pattern: a small tile that repeats edge-to-edge without visible seams, ready to paste into a page or stylesheet. The knob most people get wrong is tile size, which controls repeat frequency: a 40-unit tile puts a dot every 40 units, a 200-unit tile scatters them loosely. The other surprise: pattern coordinates are user units, so the same tile renders denser or coarser depending on the element that uses it. The preview shows how the tile repeats, not how it looks at final display size.

Worked example

A concrete input and expected output from the current implementation.

Input

Motif: dots. Tile: 40 x 40 units. Dot: radius 3, centered at (10, 10). Fill: #007AFF. Background: none.

Expected output

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
  <defs>
    <pattern id="p" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3" fill="#007AFF"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#p)"/>
</svg>

The circle sits entirely inside the 40-unit tile with no part crossing an edge, so consecutive tiles line up into an even grid: dots appear every 40 units in both directions, at (10, 10), (50, 10), (10, 50), and so on. Nothing touches the tile boundary, so nothing can be clipped - which is what makes the tiling seamless.

How the result is produced

The tile defines the repeat

The pattern element's width and height are the repeat unit. With patternUnits="userSpaceOnUse" those values are user units, so a 40 x 40 tile repeats every 40 units in both directions regardless of the size of the shape it fills. The generator draws each chosen motif once, inside the tile, and the browser paints the repetition; edit tile size to change spacing, edit the motif to change the look.

Seams are a boundary condition

A tile is seamless only when nothing is cut at its edges. A motif that crosses the right edge is clipped there, and the next tile does not render its left half, so a vertical seam appears at every repeat. Shapes must sit fully inside the tile or be duplicated on the opposite edge at a matching offset. When you hand-edit a generated tile, that edge duplication is what most often breaks.

Good uses

Give a page or section a background texture without shipping an image - the SVG pattern pastes into a file or stylesheet and stays sharp at any resolution.
Fill diagrams, deck slides, or mockups with an intentional texture - dotted regions, crosshatch fills, or a repeated motif behind a heading - instead of flat color.
Build a brand-consistent pattern from your hex values for email headers, social cards, packaging, or app chrome, and reuse the same tile across formats.

Limits and checks

Seam check: if a motif crosses the tile edge, the repeat shows cut lines. Zoom into a tile boundary in the preview before trusting it; a small preview hides seams that a full-page repeat exposes.
Scale check: pattern coordinates are user units, so the tile scales with the element's viewBox. The same pattern can read as fine grain on a small button and as large shapes behind a hero - test it at the size it will actually be used.
Contrast and moiré: a dense pattern behind text can wreck readability, and fine repeating detail shimmers with moiré when rendered at fractional scales. Check the pattern under real content at final size, and keep it subtle behind anything legible.

Common questions

Why does my pattern look different from the preview when I use it?

The preview shows the tile at a fixed zoom; in use, pattern coordinates are user units, so the element's viewBox and display size scale the motif. The tile's own width and height fix the repeat spacing. If the pattern seems too big or small, adjust the tile size, or scale the motif with patternTransform such as scale(2).

Can I use the result as a CSS background-image?

Yes. Save the exported SVG as a file or data URI and use it with background-image and background-repeat: repeat. The root svg's width and height determine the rendered tile size, so set them to the tile size (for example 40 x 40); if the root has no width and height, the browser falls back to the default replaced-element size, which rescales the motif.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.