Loading…
Loading…
Generate organic blob shapes using SVG paths. Export as SVG, CSS clip-path, or PNG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> <path d="M 333.93,200.00 C 333.93,235.71 309.39,309.65 274.83,329.61 C 240.27,349.56 158.02,355.91 121.99,335.11 C 85.96,314.31 44.59,241.44 44.59,200.00 C 44.59,158.56 91.24,90.98 125.60,71.14 C 159.97,51.30 237.69,60.01 270.04,78.69 C 302.39,97.37 333.93,164.29 333.93,200.00 Z" fill="#D5B9FF" /> </svg>
clip-path: polygon(83.5% 50.0%, 83.5% 50.0%, 83.5% 50.0%, 83.5% 50.0%, 83.5% 50.0%, 83.5% 50.0%, 83.5% 50.0%, 83.5% 50.0%, 68.7% 82.4%, 68.7% 82.4%, 68.7% 82.4%, 68.7% 82.4%, 68.7% 82.4%, 68.7% 82.4%, 68.7% 82.4%, 68.7% 82.4%, 30.5% 83.8%, 30.5% 83.8%, 30.5% 83.8%, 30.5% 83.8%, 30.5% 83.8%, 30.5% 83.8%, 30.5% 83.8%, 30.5% 83.8%, 11.1% 50.0%, 11.1% 50.0%, 11.1% 50.0%, 11.1% 50.0%, 11.1% 50.0%, 11.1% 50.0%, 11.1% 50.0%, 11.1% 50.0%, 31.4% 17.8%, 31.4% 17.8%, 31.4% 17.8%, 31.4% 17.8%, 31.4% 17.8%, 31.4% 17.8%, 31.4% 17.8%, 31.4% 17.8%, 67.5% 19.7%, 67.5% 19.7%, 67.5% 19.7%, 67.5% 19.7%, 67.5% 19.7%, 67.5% 19.7%, 67.5% 19.7%, 67.5% 19.7%);
Common questions about the Blob Shape Generator.
A blob is an organic, irregular rounded shape created with SVG path curves. Blobs are popular in modern web design for hero backgrounds, image masks, and decorative elements. They're defined as SVG <path> elements using cubic Bézier curves for smooth, natural-looking contours.
Export the blob as SVG and use it as a background image, clip-path, or mask. For clip-path, convert the SVG path to a CSS clip-path: path() value. You can also use the blob as an inline SVG and position it absolutely behind content for decorative backgrounds.
Yes — animate between blob SVG paths using CSS or JavaScript. For CSS, use the d property in @keyframes (supported in modern browsers). For smoother results, ensure both paths have the same number of points. Libraries like flubber or GSAP MorphSVG handle point interpolation automatically.
This tool generates random blobs by placing control points on a circle and adding random offsets to create organic variation. Adjust complexity (number of points) and contrast (randomness amount) to control the shape. Each generation produces a unique blob you can export as SVG or CSS.