Labs

Blob Maker

Q: Which export should I use?

SVG for websites and design tools (Figma, Illustrator) — tiny and sharp at any size. Animated SVG plays by itself in any browser via an <img> tag. CSS gives a clip-path you can put on any element. PNG/WebP for slides and social posts, GIF for chats and email, WebM/MP4 for video editors and reels.

Q: Can I come back to a design later?

Yes — every setting is saved in the page link. Use Copy share link and open it any time; nothing is stored on a server.

Shape, colour and animate organic blobs — then export SVG, animated SVG, CSS, PNG, GIF or video. Everything runs in your browser.

Design —

Start from a presetChanges style, keeps your canvas

Shape

Style

Points7

Randomness45%

Smoothness80%

Size72%

Rotation0°

SeedSame seed + settings = same blob

Colour

Blob fill

Gradient angle135°

Opacity100%

Background

Movement

Loop length6 s

Intensity60%

Preview & code —

Your blob will appear here

Settings 1:1 · 1 layer · no effects

Canvas

Layers (1)

Layer shrink (14%)

Layer offset (6%)

Blur / glow (0%)

Grain (0%)

Drop shadow

Outline only (no fill)

Outline width (8 px)

Code shows

How It Works

How to Use Blob Maker in 3 Steps

Shape it

Pick a style, then drag Points, Randomness and Smoothness — or hit Randomise for a new seed. The preview stays in view while you scroll the controls. Presets give you a styled starting point.

Colour and move it

Choose a solid, linear or radial fill, a background (or transparent) and a movement: morph, float, spin or pulse. Layers, blur, grain and shadow live in Settings.

Export

Copy the SVG or CSS, or use Download for SVG, animated SVG, PNG up to 4×, WebP, JPG, a looping GIF or a WebM/MP4 video. Copy share link saves the design in a URL.

FAQ

Blob Maker — Frequently Asked Questions

Which export should I use?

SVG for websites and design tools (Figma, Illustrator) — tiny and sharp at any size. Animated SVG plays by itself in any browser via an <img> tag. CSS gives a clip-path you can put on any element. PNG/WebP for slides and social posts, GIF for chats and email, WebM/MP4 for video editors and reels.

Do the animations loop seamlessly?

Yes. Every movement is built on one loop of the length you set, so the last frame flows straight back into the first — in the animated SVG, the GIF and the video alike.

Why does the video take as long as the loop?

Browsers record video in real time, so a 6-second loop takes about 6 seconds to export. Keep the tab visible while it records. GIFs are rendered frame by frame instead and are usually quicker.

Will blur and grain look the same everywhere?

In browsers, yes. Design tools sometimes render SVG filters (blur, grain, shadow) differently or ignore them; export a PNG if you need an exact match there. Safari before version 18 shows the live preview without blur, but the SVG export keeps it.

Can I come back to a design later?

Yes — every setting is saved in the page link. Use Copy share link and open it any time; nothing is stored on a server.

Is my input sent anywhere?

No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.