SVG Pattern Generator

The pattern is defined on a fixed tile size, and the shapes are arranged so their edges line up when the tile repeats. As long as the tile's width and height match its contents, the browser repeats it edge to edge with no seam.

For a page background, the embedded CSS version is handy because there is no separate file to download — the pattern shows instantly with no flash while an image loads. Use the standalone .svg when you want to reuse or edit the file elsewhere.

Yes — because it is SVG, you can add animation inside it to gently move or rotate the shapes. Keep it subtle for a background so it does not distract from the content.

URL-encoding is usually the better choice for SVG. Base64 inflates the data by about 33% and turns it into an opaque blob you can't read or tweak. URL-encoding (percent-encoding just the characters that need it — #, <, >, quotes) keeps the SVG smaller AND human-readable right there in your CSS, so you can adjust a color or size by hand later. The pattern: background-image: url('data:image/svg+xml,%3Csvg ...%3E'). The main reason to reach for base64 instead is if your SVG contains lots of special characters that make URL-encoding messy, or a build tool that handles it for you. For most hand-authored patterns, URL-encoded is smaller, editable, and avoids the base64 size penalty.

Edit the fill (and/or stroke) value inside the SVG markup. A pattern is just SVG shapes — circles, paths, rects — each with a fill color, so to recolor it you change those fill values in the exported SVG before encoding it into CSS. If you've already base64-encoded it into a stylesheet, you essentially can't tweak it without decoding first, which is another reason to prefer URL-encoded (readable) data URIs. For patterns you'll want to theme dynamically, keep the SVG as a separate inlined element in the DOM where CSS can target its shapes, or generate a few color variants up front. The generator lets you set colors before export, so dial them in there to avoid manual editing.