SVG Pattern Generator

SVG patterns for modern web backgrounds

SVG (Scalable Vector Graphics) is a W3C standard published in 1999 — an XML-based vector format that the browser can render at any resolution without losing sharpness. When used as a page background, SVG beats raster formats (PNG, JPG) on almost every metric that matters: the file is plain text, so it gzips down to a few hundred bytes; it scales from a favicon to a 4K hero section with no pixelation; it can be themed at runtime by changing CSS variables; and it can be animated with CSS transitions or SMIL without re-exporting an asset.

The classical way to build a tileable background in SVG is the <pattern> element declared inside <defs> and referenced by fill="url(#id)". The pattern is treated as a single tile and the browser repeats it automatically across whatever shape you fill — no background-repeat needed.

<svg width="100%" height="100%">
  <defs>
    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="#6366f1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

Classic pattern families

• Polka dots — circles laid out in a square or staggered grid; staples of editorial and packaging design.
• Grids and lines — straight horizontal, vertical or diagonal lines; the workhorse of dashboards and grid paper looks.
• Waves and zigzags — sinusoidal or sawtooth paths; suggest motion and break monotony in landing pages.
• Hexagons and honeycomb — favored by tech and gaming brands for the "structured but organic" feel.
• Topography lines — wavy concentric paths that mimic contour maps; popularised by Hero Patterns.
• Plus signs and jigsaw — geometric primitives that work well at very low opacity.

Free libraries worth knowing: Hero Patterns by Steve Schoger, SVGBackgrounds.com, MagicPattern and Pattern Monster. They all output the same kind of markup our generator produces.

Inline SVG, CSS background or data URI?

You can ship the same pattern in three ways. Inline SVG in the DOM gives you full access from CSS and JavaScript — every <circle> is a queryable node. CSS background-image: url(data:image/svg+xml,...) is the most ergonomic for decoration: the SVG is URL-encoded into the stylesheet, cached with the rest of the CSS and never reaches the DOM. Tailwind v3 supports this idiom natively through arbitrary values like bg-[url('...')]. Base64 data URI works too but is ~30% larger than URL-encoded SVG and harder to cache-bust.

Performance and accessibility

Inline SVG is parsed as part of the HTML document, so it counts toward Largest Contentful Paint and time-to-interactive — keep pattern markup short. For animated patterns, wrap the animation in a @media (prefers-reduced-motion: no-preference) block so users who opted out of motion get a static version. Mark purely decorative backgrounds with aria-hidden="true" so screen readers skip them.

FAQ

Can SVG contain JavaScript? Yes — the <script> element is part of the spec. Browsers execute it only when the SVG is loaded as a document or inline, not when it is used as background-image. For backgrounds, prefer SVGs without scripts to avoid any XSS risk.

Is SVG always smaller than PNG? For repetitive geometric patterns, almost always — a 1 KB pattern can tile a 4K page that would need a 500 KB PNG. For photographic textures, PNG/WebP wins.

Are SVG patterns truly tileable? Yes. The <pattern> element is natively repeatable through patternUnits; no seam stitching is required.

Where does the generation happen? Entirely in your browser. Nothing is uploaded — the SVG and CSS are produced client-side in JavaScript.