SVG Blob Generator
Create smooth organic blob shapes as clean SVG. Tune complexity, randomness, solid or gradient fill, then copy the SVG or export SVG / PNG.
6 points · seed 20240518 · 320×320 viewBox
What is an SVG blob?
A blob is a smooth, organic, slightly irregular shape used everywhere in modern web design — behind hero headings, as avatar masks, decorative section dividers, sticker backgrounds and illustration accents. Because it's exported as a single SVG path, it scales to any size with zero quality loss and adds almost nothing to page weight.
This generator places a ring of points, randomly pushes each one in or out, then threads a Catmull-Rom spline (converted to cubic Béziers) through them for a perfectly smooth, closed curve. The same seed always reproduces the same blob.
Controls
- Edge points: how many anchor points form the outline. Fewer (3–5) = bold, simple blobs; more (8–14) = wobblier, more complex silhouettes.
- Randomness: how far each point may deviate from a circle. Low values stay near-circular; high values get spiky and amoeba-like.
- Fill: a solid colour or a two-stop linear gradient with adjustable angle.
- Generate: rolls a new random seed for a fresh shape while keeping your style settings.
Using the output
Copy SVG
Paste the markup straight into HTML/JSX, or into abackground-image data URI.SVG file
Import into Figma, Illustrator or Inkscape as a fully editable vector path.PNG file
A 1024×1024 raster with transparent background for slides or quick mockups.Why SVG over PNG for blobs
A blob is one path — typically well under a kilobyte of markup — so the SVG is smaller than any raster, stays razor-sharp on retina and 4K screens, can be recoloured or animated with CSS, and needs no extra HTTP request when inlined. Reach for the PNG only when a tool in your pipeline can't accept vectors.