SVG background generator

A tool that draws decorative vector backgrounds — layered waves, mountain-like peaks, organic blobs or a repeating pattern tile — and hands you the SVG and the CSS that places it behind content. This one draws from a seed kept in the link, runs every file through SVGO, and measures the text you will set on the background at its least legible pixel.

• The link redraws the exact file

  Every shape comes from the settings and a 32-bit seed, and both travel in the share link. Open the link anywhere and the same bytes come out; press Space for another shape, lock the colours, the shape or the mode to keep them, and Undo to go back. The biggest generators keep the shape only in the file you downloaded.

  Measured 8 October 2026: Haikei’s editor dropped every parameter from its address, and reloading fffuel’s llleaves at the same address drew a different file (16,399 bytes, then 17,580).

• Optimised, with both sizes printed

  Each export is passed through SVGO with the settings that keep it working (viewBox kept, ids left alone), and the page prints the bytes before and after, gzipped too. Layers close along the frame with straight lines rather than curves.

  The default five-layer waves are 1,301 bytes as written and 976 after SVGO. A Haikei layered-waves file measured 2,660 bytes, and 1,383 after the same optimiser.

• Text measured where it sits

  The preview puts a headline and a paragraph on the background, and each is measured against every pixel behind it, WCAG 2 ratio and APCA Lc. The worst pixel is named and can be marked; a failing line comes with the lightest scrim that fixes it, which goes into the exported CSS as a layer above the image.

  Slate #475569 text over grey #64748b dots on white averages 6.04:1, which looks like a pass, and is 1.59:1 over each dot.

• Patterns that tile without a seam

  Tiles are whole pixels, and every mark that crosses an edge is copied to the opposite edge. The page then paints the pattern as an endless plane across four tiles and compares it with the tile repeated, pixel by pixel, and prints the largest difference.

  With the edge copies switched off, a 40px confetti tile differs from its endless pattern by 208 of 255 levels at the seam; with them, by at most 1.

1. 1

   Pick a kind, then press Space

   Choose Waves, Peaks, Blobs or Pattern under the artwork and press Space for a new shape and palette. A background Space makes passes its text at every pixel behind it, where the text sits on your screen; the eight presets in Settings pass on the desktop preview. On a phone the text covers more of the artwork, so read the figure again there.

2. 2

   Lock what you like, and shape it

   Lock the colours to try shapes, or the shape to try colours. Settings holds the layers, swing and reach, the blob count and size, or the tile and mark size. Keep Reach low enough that the shapes stay below the headline, or choose Corners for blobs.

3. 3

   Read the worst pixel

   The Text chip under the stage lists each text box with its worst ratio and where it is. Change the text colour, move the shapes, or set the scrim it suggests.

4. 4

   Check the other screens, then export

   The Fit chip shows what Crop to cover cuts and what Stretch distorts on four screen shapes. Copy the CSS from the bar, or open Export for the SVG file, the CSS for it, or a PNG or WebP at the size set in Settings, each with its size in bytes.

• How to make an SVG wave or pattern background that stays readable and smallMake SVG waves, blobs and patterns that keep a headline readable, stay small and redraw from a link: worst-pixel contrast, SVGO and seamless tiles.

• No blurred or grainy effects. SVG filters cost rendering time on every repaint, and engines blur differently, so the contrast figure could not be trusted; the gradient generator’s grain and mesh cover that look in CSS.
• No animation. A moving background changes the contrast under the text every frame, which one figure cannot describe.
• Contrast is measured over each text box rather than the letter shapes, so the figure is conservative: the worst pixel may sit between words.
• The figure is for the preview at your screen’s width. On a phone the same text wraps onto more lines and covers more of the artwork: the default waves pass on the stage from 375 pixels wide up, and at 320 the body text reaches the first wave and needs a 10% scrim.
• Shapes are generated, not drawn: there is no library of illustrated patterns here, by design, because every library checked restricts redistribution or asks for credit.