How to svg blob generator: create organic shapes free online
- Step 1Open the generator — no file needed — The Blob Generator is a generative tool, so there is no upload box. The page shows the options panel and a Generate button directly. You will produce a shape from settings, not transform an existing file.
- Step 2Set the Points slider — Points controls how many anchors sit around the circle (the web slider runs 3–10). Three gives a chunky, near-triangular blob; 6 (the default) is a balanced organic form; 8–10 gives a richer, wavier outline. More points means more
Csegments in the path. - Step 3Pick the fill colour — Color is a single solid fill (default
#6366f1, an indigo). The picker writes directly into the path'sfillattribute. There is no gradient or opacity control in the tool — apply those yourself in CSS after export (see the cookbook). - Step 4Click Generate — repeat until you like it — Each click runs
Math.random()to offset every anchor's radius by up to ±20%, so the shape changes every time even with the same Points and Color. There is no seed, so keep clicking until a shape looks right — then capture it immediately. - Step 5Inspect the preview and source — The result panel renders the blob live and shows a metrics bar (
Points,Color) plus output byte size. Expand View SVG source to read the exact<path d="M… C… Z"/>markup before you take it. - Step 6Copy or download — Use Copy to clipboard to grab the full SVG string for an inline paste, or Download SVG to save
blob.svg. There is no 'copy CSS' orclip-pathbutton — if you need a clip-path, see svg-clip-path-gen, which converts an SVG path into aclip-path: polygon()value.
The three options — and where each actually lives
The schema defines three options, but the browser UI only renders two of them. The third (smoothing) is reachable through the API/runner. Numbers are taken directly from the tool schema and the client component.
| Option | Range / default | In the web UI? | What it does |
|---|---|---|---|
blobPoints | 3–12 (schema); slider is 3–10. Default 6 | Yes — Points slider (3–10) | Number of anchors evenly spaced around the circle. Each anchor becomes one cubic-Bezier segment in the output path |
blobColor | Any colour. Default #6366f1 | Yes — Color picker | Written verbatim into the path's fill attribute. Solid fill only — no gradient, no opacity |
blobSmoothing | 0.1–1, step 0.05. Default 0.4 | No — API/runner only | Catmull-Rom tension: higher values bow the curve out more (looser, rounder); lower values pull it tight toward the anchors. Fixed at 0.4 in the web tool |
What the exported SVG looks like
Every blob is structurally identical apart from the path data and fill — useful to know when you plan to morph between two of them.
| Property | Value | Note |
|---|---|---|
| Root element | <svg viewBox="0 0 400 400" width="400" height="400"> | Fixed dimensions; scale via CSS width/height or by editing the attributes |
| Shape | A single <path d="M… C… Z"/> | One move, one closing Z, and (points − 1) cubic C segments between |
| Centre / radius | Centre 200,200; base radius 150, jittered ±20% per anchor | Anchors land between radius 120 and 180 from centre |
| Fill | fill="<blobColor>" | No stroke, no fill-opacity, no <linearGradient> — add those by hand if needed |
| File name | blob.svg | Used by the Download button |
Cookbook
Concrete recipes for the most common ways people use a generated blob. Each shows the exact markup the tool emits and the CSS you add on top — because styling (gradient, opacity, blur) happens in your stylesheet, not in the generator.
The raw output (6 points, default colour)
This is exactly what Copy to clipboard gives you for the default settings. Note the single solid fill and the C segments — your actual coordinates differ on every Generate because of the random ±20% radius jitter.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"> <path d="M243.1,93.4 ... C... ... Z" fill="#6366f1"/> </svg>
Use it as an inline hero accent
Paste the SVG directly into your markup, position it absolutely behind the hero content, and let your own CSS handle opacity and pointer-events. The generator does not add these — you do.
<section class="hero">
<svg class="blob" viewBox="0 0 400 400">
<path d="M…" fill="#6366f1"/>
</svg>
<h1>Ship faster</h1>
</section>
.hero { position: relative; }
.blob {
position: absolute; inset: 0; z-index: 0;
width: 60%; opacity: 0.18;
pointer-events: none;
}
.hero h1 { position: relative; z-index: 1; }Add a gradient the tool cannot
The generator only writes a solid fill. To get the trendy gradient blob, replace the fill value with a gradient reference and add a <defs> block yourself.
<svg viewBox="0 0 400 400" width="400" height="400">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
</defs>
<path d="M…" fill="url(#g)"/>
</svg>Reference it as a CSS background-image
Download blob.svg, drop it in your assets folder, and point background-image at it. For an inline data URI instead of a file, run the saved blob through svg-css-data-uri.
/* after saving the download as /img/blob.svg */
.card-bg {
background-image: url('/img/blob.svg');
background-repeat: no-repeat;
background-size: 140%;
background-position: top right;
}
/* or inline it as a data URI: paste blob.svg into */
/* /svg-tools/svg-css-data-uri to get a url('data:image/svg+xml,…') */Clip an image to the blob shape
The generator does not emit a clip-path. Take the d value from the exported path and feed the SVG into svg-clip-path-gen, which returns a clip-path: polygon() approximation you can apply to any element.
/* 1. Generate a blob, copy the <path d="…"> */
/* 2. Paste the whole SVG into /svg-tools/svg-clip-path-gen */
/* 3. It returns a polygon() value: */
.avatar img {
clip-path: polygon(73% 6%, 92% 28%, …);
width: 200px; height: 200px;
object-fit: cover;
}Edge cases and what actually happens
Every Generate gives a different shape
By designThe tool calls Math.random() to offset each anchor's radius (up to ±20%). There is no seed input, so the same Points + Color will not reproduce the same blob. If you find a shape you like, copy or download it immediately — you cannot regenerate the identical path later.
Web slider stops at 10, but the schema allows 12
ExpectedThe browser Points slider is capped at 10, while the option schema accepts blobPoints up to 12. The extra two points are only reachable through the API/runner. For most layouts 10 anchors is already very wavy, so the cap rarely matters in the UI.
Smoothing cannot be changed in the browser
ExpectedThere is no smoothing control in the web UI — it is fixed at the default 0.4. To loosen or tighten the curve you must call the tool via the runner with blobSmoothing (0.1–1). At 0.4 the spline is rounded and balanced for most uses.
Three points makes a near-triangle, not a blob
ExpectedAt blobPoints: 3 there are only three anchors, so the smooth path reads as a softened triangle rather than an organic blob. If you want recognisably 'blobby' output, stay at 5 or above; use 3–4 only for deliberate minimal accents.
No gradient option in the tool
By designThe export carries a single solid fill. The popular gradient-filled blob is added by hand: wrap a <linearGradient> in <defs> and set fill="url(#id)" (see the cookbook). The generator will never emit a <defs> block on its own.
No opacity or blur in the output
By designThe path has no fill-opacity and no filter. Background-blob softness (low opacity, large blur()) is a CSS concern — apply opacity and filter: blur() to the element in your stylesheet, not inside the SVG.
Looking for a clip-path export
Use sibling toolThis tool has no 'copy CSS' or clip-path button. To turn a blob into a CSS mask, paste the generated SVG into svg-clip-path-gen, which outputs a clip-path: polygon() approximation that works on any HTML element.
Fixed 400×400 canvas
PreservedEvery blob is drawn in a 0 0 400 400 viewBox with width="400" height="400". The shape scales perfectly because of the viewBox — override the width/height attributes or set them in CSS to size it for your layout; you do not need to regenerate to resize.
Pasting a colour name vs hex
SupportedThe Color control is a native picker, so it emits hex. Via the API you may pass any CSS colour string for blobColor — it is written verbatim into fill, so rebeccapurple or hsl(250 84% 60%) are valid if your renderer supports them. The picker itself only produces hex.
Output is one path — fine for morph animation
SupportedBecause the shape is a single closed <path>, two blobs generated at the same point count share the same number of C commands and can be morphed with the CSS d property or a library. Different point counts have different command counts and will not interpolate cleanly with the plain CSS d property.
Frequently asked questions
How are the blob shapes generated mathematically?
The tool spaces N anchor points evenly around a circle (centre 200,200, base radius 150), then offsets each point's radius by a random ±20%. It connects the points with cubic Bezier segments whose control points come from a Catmull-Rom spline — each control point is derived from the neighbouring anchors, which is what guarantees a closed, corner-free curve. The result is one <path d="M… C… Z"/>.
Can I save a seed to reproduce the exact same blob?
No. The generator uses raw Math.random() with no seed input, so identical Points and Color settings produce a different shape on every Generate. If you find a blob you like, copy or download it on the spot — you cannot regenerate the same path later. To keep a reusable shape, store the SVG file itself.
Why is there no smoothing slider?
The browser UI exposes only two controls — Points and Color. The third schema option, blobSmoothing (0.1–1, default 0.4), is reachable through the API/runner but is fixed at 0.4 in the web tool. At 0.4 the curve is well-rounded for general use; if you need tighter or looser curves, drive the tool via the runner.
How many points can I use?
The web slider runs 3–10. The underlying schema accepts blobPoints up to 12, but those last two are only available through the API. Three points reads as a softened triangle; six (the default) is a balanced blob; eight to ten produces a wavier, more complex outline.
Can I get a gradient blob?
Not from the tool directly — it writes a single solid fill. To add a gradient, copy the SVG, add a <defs> block with a <linearGradient>, and change the path's fill to url(#id). The cookbook on this page has the exact snippet.
Does it export a CSS clip-path or polygon()?
No. The only outputs are the SVG markup (Copy to clipboard) and the downloaded blob.svg. For a clip-path, paste the generated SVG into svg-clip-path-gen, which converts a path into a clip-path: polygon() value you can apply to images or any element.
How do I use a blob as a section background?
Two routes. Inline: paste the SVG into your markup, position it absolute with z-index: 0 and pointer-events: none, and set opacity plus filter: blur() in CSS for the soft look. As a file: download blob.svg and reference it with background-image: url('/blob.svg'). The generator emits no opacity or blur — those are CSS you add.
Can I animate or morph the blob?
Yes. Generate two blobs at the same point count so both paths have the same number of C commands, then morph between them using the CSS d property in keyframes or a JS library. Same-count paths interpolate cleanly; different point counts will not with the plain CSS d property. See the blob animation guide.
What size is the generated file?
Tiny — a single <path> in a fixed viewBox is typically well under 1 KB. The result panel shows the exact output byte count. If you want to shave the last few bytes (rounding, attribute cleanup), run it through svg-pro-minifier.
Can I resize the blob without regenerating?
Yes. The shape lives in a 0 0 400 400 viewBox, so it scales to any size. Change the width/height attributes or set them in CSS; regenerating only changes the shape, not the resolution. To re-centre or trim whitespace around it, use svg-responsive-wrapper.
Can I use generated blobs commercially?
Yes. The output is original markup produced from your settings — there is no licensing attached, so use it freely in commercial work. The tool runs in your browser; nothing is uploaded and no usage is gated for the generator itself (it is a free-tier tool).
Can I generate blobs programmatically?
Yes. GET /api/v1/tools/svg-blob-generator returns the three-option schema; pair the @jadapps/runner and POST { "blobPoints": 8, "blobColor": "#8b5cf6", "blobSmoothing": 0.5 } to http://127.0.0.1:9789/v1/tools/svg-blob-generator/run. The runner is where blobSmoothing and the full 3–12 point range become available — see the batch generation guide.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.