SVG Blob Generator

How do you create a blob and export it at the right size?

Click Randomize, choose a fill, and adjust Complexity and Contrast until Live preview shows the shape you want. Download SVG keeps the shape as vector path data; Download PNG makes a square raster image. The generator also provides copyable SVG markup, a CSS background declaration, and morph keyframes when animation is enabled.

For a reproducible example, enter hero-card in Seed, set Complexity to 6, Contrast to 50%, Size to 256px, and choose Solid. Set PNG scale to 4x. The exported PNG is 1024 by 1024 pixels because each side is calculated as 256 × 4. Changing the fill color leaves the path unchanged; changing the seed changes its geometry.

PNG export dimensions for a 256px Size

PNG scale	Calculation per side	Output dimensions
1x	256 × 1	256 × 256 pixels
2x	256 × 2	512 × 512 pixels
4x	256 × 4	1024 × 1024 pixels

Size is the square viewport, not the exact visible width of the irregular shape. The SVG uses a matching viewBox rather than a fixed raster grid. For a smaller asset, choose the dimensions your destination needs instead of assuming the largest PNG scale improves every use.

What are SVG blobs useful for in a layout?

A blob is a closed, irregular shape built from curves. Use one behind a hero illustration, as a card accent, or as a decorative color patch. SVG keeps its geometry scalable when you change its display dimensions. A PNG fixes the rendered pixels at export time, which suits destinations that require a raster file.

This tool generates a single blob rather than a complete page composition. It does not arrange multiple layers, place text or edit individual curve handles. Use CSS Clip Path Generator when your goal is clipping an existing element, or CSS Border Radius Generator for a rounded box controlled by corner radii.

How do Complexity, Contrast and cubic Bezier curves change the shape?

Complexity selects 3 to 12 anchor points in whole-number steps. The generator spaces their angles evenly around a center and varies each point's radius using a seeded pseudorandom sequence. More points add curve segments; they do not add separate blobs. Contrast controls radial variation from 10% to 100%, in five-percentage-point steps. Here, Contrast describes geometry rather than text-to-background color contrast.

The center is half the Size, and the base radius is 70% of that half-size. Each radius is multiplied by 1 + (random − 0.5) × contrast × 1.2, with contrast represented as a fraction. Increasing Contrast therefore spreads the radii further around the base radius. It does not move points to freely chosen angles or guarantee a particular silhouette.

Under SVG path syntax, each cubic Bezier C command contains two control points and an endpoint. This generator derives handles from neighboring anchors using a 0.25 multiplier, rounds coordinates to one decimal place, and closes the path with Z. That produces connected curves without requiring you to draw handles manually.

Which fill should you choose for color, outlines or photos?

Solid uses Fill color. Linear and Radial use Start color and End color as two gradient stops. Linear adds an Angle control from 0 to 360 degrees in five-degree steps. Radial uses a centered gradient; there are no controls for moving its center or adding more stops. Use Palette Generator if you need colors before setting the fill.

Outline removes the interior fill and uses Fill color for the stroke. Stroke width ranges from 1 to 32, with a default of 4, and the SVG uses round stroke joins. Check the preview at high Contrast or wide strokes: the viewport is fixed, and the tool does not automatically expand it to fit every possible contour.

Fill with image accepts local PNG, JPEG, WebP and GIF files. It reads the selected image locally and embeds it in an SVG pattern. The image is centered and cropped to cover its square area, so a wide photograph can lose content at its sides. There are no crop-position controls. An image larger than 2 MB produces a memory warning; this is not a hard upload limit. Without a valid image, this mode has no visible fill.

How do you reproduce and share a shape?

The same Seed, Complexity, Contrast and Size regenerate the same path. Seed accepts up to 32 characters from letters, digits, periods, underscores, tildes and hyphens; unsupported characters are removed. Randomize replaces the seed while leaving the other settings in place. Save the seed together with the geometry settings if you are recording a design decision outside the tool.

Copy link preserves those settings plus fill mode, colors, gradient angle, animation, duration, PNG scale and stroke width when set. The state is stored in a versioned URL hash. Older seed-only links remain supported. Local image contents are deliberately excluded, and image mode becomes Solid in a copied link. Export the SVG to carry the embedded picture; the link alone cannot recreate that image fill.

How does morph animation handle motion preferences?

Animate (morph between two shapes) generates a second path from the original seed with ~b appended. It keeps the point count unchanged so both paths have matching command structures. Duration runs from 2 to 20 seconds in whole seconds. The SVG SMIL animation loops from the first shape to the second and back; Copy keyframes provides a CSS alternative using d: path().

The preview pauses morphing when the system requests reduced motion. Exported animated SVG includes a static path fallback selected by a reduced-motion media rule, and the CSS keyframes output disables animation under that preference. PNG export always renders the first shape, regardless of the animation toggle. It does not create an animated PNG, GIF or video.

How do you embed the output and manage its size?

Copy CSS supplies a URL-encoded background-image declaration. Put it inside your own selector, then choose background-size: contain to fit the whole viewport or cover when cropping is acceptable. Add positioning and repeat rules for your layout. Copy SVG instead supplies markup; for inline SVGs sharing a seed, rename duplicate gradient or pattern IDs and their references.

There is no fixed byte-size promise: more curve points, gradient definitions and animation add markup, while image fills also carry encoded picture data. Inspect the actual export when budgeting page weight. PNG uses browser canvas rasterization and has a transparent background outside the shape. If rasterization fails, the tool displays an error directing you to Download SVG instead.