SVG Blob Generator

The seed matters more than it first appears. Without one, every regeneration would be unrepeatable, so a shape you liked could never be recovered; with one, the blob is a pure function of your settings and can be reproduced exactly at any time. For visual results, fewer points with high randomness gives bold, characterful shapes, while more points with the same randomness produces gentle waves — because each individual deviation is smaller relative to its neighbours. Since the output is a single path, you can recolour it with CSS, animate the fill, or use it directly as a clip-path or mask.

Points are placed evenly around a circle, then each radius is shortened by a random amount up to the randomness percentage. Those points are joined with a closed Catmull-Rom spline converted into cubic bezier segments, which is what makes the outline continuously smooth rather than angular.

The output is a decorative shape, not an icon or logo — it has no semantic meaning and should be marked as presentational for screen readers. Very high randomness with few points can produce self-intersecting shapes that look pinched, so raise the point count if the outline crosses itself. Only solid fills and simple two-stop linear gradients are supported; strokes, shadows and multi-stop gradients need editing afterwards.

Six points at 35% randomness with seed 12345 produces a gently lopsided blob in a single path of six bezier curves — small enough to inline directly in your HTML.

1. Set how many points the blob should have.
2. Raise randomness for a lumpier shape, lower it for a gentler one.
3. Change the seed until you find a shape you like.
4. Pick your colours and download the SVG.

• Pushing randomness so high the outline crosses itself.
• Exporting at a fixed pixel size when SVG scales freely anyway.
• Forgetting to mark decorative shapes as presentational for accessibility.
• Losing a shape you liked by not noting its seed.

The SVG Blob Generator creates the smooth organic shapes used behind hero sections, avatars and illustrations. Adjust how many points the shape has and how irregular they are, pick a solid colour or gradient, and download a clean single-path SVG.

Web designers and front-end developers building modern landing pages and decorative backgrounds.

• Seeded generation — the same seed always reproduces the same blob.
• Output is one clean path, not a mesh of overlapping shapes.
• Optional two-colour gradient built into the SVG.
• Scales to any size without losing sharpness.

• Adding an organic background shape to a hero section.
• Creating a decorative mask for a profile image.
• Building abstract shapes for an illustration or presentation.
• Generating a soft container behind a call-to-action.