A background pattern that ships as a data URI needs no network request, no build step and no separate file. Pick a style, set the colours, and take the finished CSS rule.
What you can control
- Six pattern styles with different visual weights, from a light dot grid to heavy triangles.
- Leave the colours blank and they derive from the seed, keeping a set of patterns visually related.
- Three output modes: raw SVG for editing, a data URI for embedding, or a complete CSS rule to paste.
- Tile size is adjustable, and every pattern repeats seamlessly at that size.
What this is not
Base64 encoding adds about a third to the file size. For a pattern much above 5 KB, a separate .svg file will load faster than an inline data URI.
Questions
Do these tile seamlessly?
The stripe, dot and grid patterns do. Triangles and blobs are placed at random within the tile, so their edges will show a seam if you look for it.
Should I use a data URI or a file?
Data URI for small patterns — it saves a request. Separate file above roughly 5 KB, where the base64 overhead outweighs the saved round trip.
Can I recolour these later?
Only by regenerating, since colours are baked into the encoded SVG. Take the raw SVG output if you want to edit the fills by hand.