Image Tools
SVG Blob Generator
Generate random organic SVG blob shapes for backgrounds, hero sections, and UI elements. Adjust complexity and contrast, pick a color, and copy or download.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M 200.0,72.1 C 232.8,70.9 281.5,91.9 302.8,118.0 C 324.0,144.2 335.4,196.2 327.5,229.1 C 319.7,262.0 286.2,300.8 255.6,315.4 C 224.9,330.1 174.8,331.2 143.7,317.0 C 112.5,302.8 74.7,262.0 68.4,230.0 C 62.2,198.0 84.1,151.4 106.1,125.1 C 128.0,98.8 167.2,73.3 200.0,72.1 Z" fill="#6366f1"/></svg>
How blobs are generated
Points are placed around a circle at evenly-spaced angles, with each radius randomized using a seeded noise function. Catmull-Rom splines are then converted to cubic bezier curves to produce a smooth, continuous path through all the points.
Frequently asked questions
What is an SVG blob?
An SVG blob is a smooth, organic, irregular shape — like a rounded amoeba. They are popular in modern web design as background shapes, section dividers, and decorative elements.
How do I use the SVG in my project?
Click 'Copy SVG' to copy the SVG code, then paste it directly into your HTML or React JSX. Alternatively, download the .svg file and reference it as an image.
What do complexity and contrast control?
Complexity controls how many anchor points the blob has — more points create more intricate shapes. Contrast controls how far the points deviate from a perfect circle — higher values make the blob more irregular.
Can I animate the blob?
Yes. Apply a CSS animation that transitions the SVG path's d attribute between two generated blob paths. There are also JavaScript libraries like anime.js that support SVG morph animations.