SVG Blob Generator

What this tool does

SVG Blob Generator scatters points evenly around a circle, nudges each one in or out with a seeded random number generator, then joins them with a smooth closed curve to form an organic shape. The same seed always produces the same blob, a shuffle button picks a new one, and the result can be copied as raw SVG markup or downloaded as a .svg file.

Flat geometric shapes can feel sterile behind a hero image or a testimonial card, which is why so many modern sites use soft, irregular blobs as background decoration. Hand-drawing one in a vector editor takes time and rarely looks quite organic; this tool builds one from a handful of numbers instead.

Points are placed at equal angles around a circle, then each one is pushed closer to or further from the centre by an amount controlled by the Roughness setting and a pseudo-random number generator seeded from the Seed text. Because the generator is seeded, typing the same seed again always rebuilds the exact same outline, which makes a particular blob reproducible in code reviews or design handoffs.

How to use SVG Blob Generator

1. Set Points to control how many bumps the outline has; fewer points give a simpler, rounder blob, more points give a lumpier one.
2. Drag Roughness to control how far each point can wander from a perfect circle; 0% gives a plain circle, 100% gives a very irregular shape.
3. Set Size to the pixel dimensions you want the exported SVG to render at.
4. Pick a Fill colour for the shape, or leave the default indigo.
5. Type any text into Seed, or press Shuffle seed to generate a new random one, until the preview looks right.
6. Copy the SVG markup into your codebase, or press Download to save it as a .svg file.

Tips for better results

• Write down or bookmark a seed you like; typing it back in later rebuilds the identical blob, which plain randomness cannot guarantee.
• Lower roughness values around 20-40% usually look more professional as a background shape than very high values, which can look jagged.
• The exported SVG has no dependencies and no script content, so it is safe to inline directly in HTML or drop into a design tool.
• Because the path uses a fixed internal coordinate grid, you can resize the shape afterwards by editing only the width and height attributes without regenerating it.

Common use cases

• Decorative background shapes behind hero sections, pricing cards or testimonial blocks.
• Placeholder avatar frames or image masks with a softer outline than a plain circle.
• Quick mockup assets for a design file before a designer produces a final illustration.
• Generating a family of related blobs by keeping the same point count and roughness while changing only the seed.

Common mistakes to avoid

• Setting roughness to the maximum for a subtle UI accent, which usually looks more chaotic than organic at that extreme.
• Forgetting the seed used for a shape that needs to be recreated later, since a shuffled seed cannot be reverse-engineered from the resulting path.
• Using very few points with high roughness, which can occasionally produce a shape with a sharp, pointed corner instead of a smooth curve.