SVG Blob Shape Generator

Fast, accurate and free online svg blob shape generator tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Generator settings

Fill mode

Width 600

Height 600

Number of points 9

Variability 0.28

A seed of randomness

Enable stroke

Live Shape Preview

Code SVG 579 B

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600" role="img" aria-label="Generated blob"><path d="M 570.36 300 C 582.71 347.71 546.48 438.9 507.65 474.24 C 468.82 509.58 392.4 505.78 337.39 512.06 C 282.39 518.35 217.31 535.12 177.63 511.95 C 137.95 488.78 117.9 422.57 99.3 373.05 C 80.7 323.53 46.36 250.86 66.05 214.85 C 85.73 178.83 170.83 185.84 217.42 156.96 C 264 128.09 309.55 36.43 345.56 41.59 C 381.58 46.76 396.06 144.89 433.53 187.96 C 470.99 231.03 558 252.29 570.36 300 Z" fill="#5c3388" stroke="none" stroke-width="0" /></svg>

width: 600

height: 600

points: 9

variance: 0.28

seed:

fill: #5c3388

Rate this tool:

Related tools

Other tools you may find useful

SVG Blob generator - organic shapes without vector editor

A blob (organic shape) is an invalid, rounded figure used in modern web design as a background, card decoration or mask. The tool generates unique blobs by randomly modifying the nodes of the Bézier curve - each click produces a different shape.

SVG blob generator organic SVG shapes blob shape CSS random SVG shape

Blob generation algorithm

A base polygon (e.g. 8 nodes) on a circle. Each node moves randomly along a radius (±20-40% from a perfect circle). Bézier tangents: calculated for smooth transitions. "Complexity" parameter: number of nodes (4=simple, 12=complicated). "Smoothness": tangent length (0=angular, 1=round).

Shape Variants

Static blob: single path SVG. Animated blob (morph):between 2-3 shapes - the blob "breathes". CSS blob: clip-path: path("...") + CSS transition. Gradient fill: linearGradient or radialGradient inside SVG.

Fills and effects

Solid color: fill="#FF6B6B". Linear gradient: 2-3 colors in any direction. Radial gradient: radial, "glow" effect. Mesh gradient: experimental CSS. Opacity: overlaying several blobs of different transparency. SVG filter: blur (feGaussianBlur), shadow.

Design uses

Hero section backgrounds: blob as backdrop with low opacity. Cards: blob as a decorative background element of the product card. Image masks:with a blob – a photo in an organic shape. Illustrations: several blobs + icons = modern flat illustration. Loading screen: animated blob as loader.

FAQ

How to use a blob as an image mask in CSS?

Copy path: clip-path: path("M...") or use SVG clipPath. CSS: .avatar { clip-path: path("M 100..."); }. Animation: @keyframes morph { 0% { clip-path: path("M..."); } 100% { clip-path: path("M..."); } }. Both paths must have the same number of nodes.

How do I export a blob to Figma?

Copy the SVG code. In Figma: File → Import or Paste as Vector (Paste in Place). Figma imports SVG as editable vectors. You can edit the nodes (Edit Vector) and change colors. Alternatively: copy path d="..." and create the Vector Shape manually.

How many nodes does a perfect blob have?

6-8 knots: optimal – natural look without too many "pockets". Less than 5: triangle or square with curves, too geometric. More than 12: complex, "nervous" shape. For an animated morph: an even number of nodes.

Is it possible to animate a blob via CSS without JavaScript?

Yes:in SVG (SMIL) or CSS @keyframes with clip-path. Limitation: CSS clip-path animation requires an identical number of points in the start and end shapes. Better solution: JavaScript with node interpolation (flubber library).

How to avoid sharp spikes in the blob?

Increase the "smoothness" parameter - longer Bézier tangents. Reduce "variance" - smaller node shifts from the circle. Minimum node radius: > 30% of the maximum (so as not to create too deep recesses).

Related tools: SVG polygon generator, SVG wave generator and CSS gradient generator.