Where blobs work
Blobs soften layouts that would otherwise be all rectangles — behind product shots, as section backgrounds, as image masks. They took over landing-page design precisely because they read as friendly and hand-made while still being a 1 KB vector that scales forever.
Using the SVG
Download the file and use it like any image, or copy the code and inline it — inline SVG can be styled and animated with CSS. To use a blob as an image mask, wrap your image in the SVG with a <clipPath>, or set the blob as a CSS mask-image. Fewer points give rounder, calmer shapes; more points with high irregularity get spiky — the sweet spot is 5–7 points around 30–45%.
Frequently asked questions
Does anything get uploaded?
No. The path is generated in your browser and the SVG is yours to copy.
Should I use SVG or border-radius for a blob?
Border-radius is lighter and animates cheaply, but only makes rounded rectangles. SVG handles genuinely irregular shapes and can be morphed.
How do I animate between two blobs?
Both paths need the same number of points. Different counts cannot be interpolated — add duplicate points to the simpler shape.
Will it scale on mobile?
Yes with a viewBox and no fixed width. Without a viewBox an SVG is a fixed-size image.
Something wrong with this tool, or an idea for it? Tell us