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 588 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 569.75 300 C 571.63 351.37 528.91 428.56 489.29 458.83 C 449.67 489.11 379.14 481.18 332.03 481.66 C 284.92 482.15 255.93 476.02 206.62 461.75 C 157.3 447.47 46.68 432.48 36.16 396.03 C 25.64 359.58 122.98 299.65 143.52 243.05 C 164.05 186.44 126.67 84.48 159.37 56.43 C 192.07 28.37 286.61 59.03 339.72 74.72 C 392.84 90.42 439.72 113.05 478.06 150.59 C 516.39 188.14 567.88 248.63 569.75 300 Z" fill="#9b64e8" stroke="none" stroke-width="0" /></svg>

width: 600

height: 600

points: 9

variance: 0.28

seed:

fill: #9b64e8

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.