SVGFlow
Open editor

SVG pattern generator

Generate seamless SVG background patterns — dots, grids, stripes, crosses, zigzags and rings. Tune the tile size, weight and colors, then take the markup or a ready-made CSS background-image declaration.

Previewtile 24 × 24
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480" width="800" height="480">
  <defs>
    <pattern id="tile" width="24" height="24" patternUnits="userSpaceOnUse">
      <circle cx="12" cy="12" r="2" fill="#2f6df6"/>
    </pattern>
  </defs>
  <rect width="800" height="480" fill="url(#tile)"/>
</svg>
CSS
.tiled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2' fill='%232f6df6'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
Motif
Tile size — 24px
Weight — 2px
Colors

The CSS block already contains the encoded tile — the same trick the Data URI tool does for whole files.

How it works

Each motif is drawn once into a tile whose edges are designed to meet themselves — including the diagonal stripes, which carry a clipped extra stroke in each corner — and the tile repeats through an SVG <pattern> in the demo sheet. The CSS output takes the leaner route: one tile encoded as a data URI on background-image, tiled by background-repeat, exactly the encoding the Data URI tool produces for whole files.

When to use it

Section backgrounds, cards, empty states, print-like textures — anywhere flat colour is too flat and an image is too heavy. A tile is a few hundred bytes, ships inside the stylesheet, and recolours by editing two hex values.

Common problems

  • The pattern shimmers or looks muddy. Small tiles with thin weights alias on low-DPI screens. Grow the tile size or the weight until the motif has real pixels to live in.
  • It fights the content in front of it. Patterns are texture, not figure — drop the foreground colour's contrast against the background, or add the background colour and lower the difference between the two.
  • Dark mode inverts the page but not the pattern. The colours are baked in. Generate a second tile for dark mode and swap the CSS custom property or class that carries it.

Notes

  • Every motif is drawn to tile seamlessly — edges meet edges, including the diagonal stripes.
  • The CSS version embeds one tile as a data URI and lets background-repeat do the tiling, which is lighter than shipping the demo sheet.
  • Transparent background by default, so the pattern sits on whatever the page already has; turn the background on to bake a colour in.

Related tools