SVG Blob & Background Pattern Generator
The SVG Blob & Background Pattern Generator is two tools in one: a random organic blob shape generator (like blobmaker.app) with control over point count, randomness, and color, and a seamless SVG background pattern generator (dots, grid, diagonal lines, waves) with control over tile size, stroke width, foreground color, and background color. Copy the raw SVG code directly, copy it as a ready-to-use CSS background-image declaration, or download it as a standalone .svg file. All generation happens in your browser via pure math — nothing is ever uploaded to a server.
The graphic is generated entirely in your browser — nothing is ever sent to a server.
SVG code
<svg width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg"><path d="M 112.62 -48.05 Q 129.15 0.00 94.34 29.77 Q 59.54 59.54 29.77 90.76 Q 0.00 121.98 -54.67 115.66 Q -109.34 109.34 -131.53 54.67 Q -153.72 0.00 -113.72 -36.85 Q -73.71 -73.71 -36.85 -100.92 Q -0.00 -128.12 48.05 -112.11 Q 96.09 -96.09 112.62 -48.05 Z" fill="#6366f1" /></svg>
What this tool does
Generates organic flowing shapes or repeating background patterns — dots, grid, diagonal lines and waves — as SVG, with colours and settings you control, giving both SVG code and CSS for use as a background.
When to use it
- An organic shape as a background for a page section.
- A light repeating background pattern instead of an image.
- A decorative element behind content.
- A background that must stay crisp at any size.
How to use it
- Choose "Organic Blob" or "Background Pattern".
- For a blob: set the "Number of points", the "Randomness" and the "Color", and press "Generate new shape" until you like it.
- For a pattern: choose the "Pattern type" and set the "Tile size", "Stroke width" and "Background color".
- Copy the "SVG code" or the "CSS code (as background)", or download the SVG.
A practical example
Input
An organic blob with a moderate number of points and high randomness.
Output
An irregular flowing shape as SVG, with its code ready to paste.
Limitations
- Each generate press produces a new random shape and the previous one cannot be recovered; save what you like as soon as it appears.
- Dense repeating patterns can distract from the content above them; use them in muted colours.
- Text over a pattern can lose legibility; check the contrast.
Privacy and processing
The graphic is generated entirely in your browser and nothing is ever sent to a server.
Technical notes
- The output is vector SVG, so it stays crisp at any size and is far smaller than an equivalent raster image.
Frequently Asked Questions
Yes, in pattern mode a ready-to-use background-image CSS declaration is available to copy directly into a stylesheet.