Blob Shape Generator

Generate organic blob shapes as SVG with randomized control points and color.

Preview

Settings

Color

Complexity8 points

Size400px

Seed42

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M298.0,200.0 C298.2,250.0 325.0,260.5 300.5,300.5 C275.9,340.4 246.3,363.7 200.0,359.8 C153.7,355.9 147.5,324.9 115.1,284.9 C82.7,245.0 69.4,241.5 70.4,200.0 C71.4,158.5 86.6,164.0 119.0,119.0 C151.4,74.1 154.8,24.7 200.0,20.0 C245.2,15.3 275.2,55.3 299.7,100.3 C324.2,145.3 297.8,150.0 298.0,200.0 Z" fill="#8b5cf6" />
</svg>

CSS clip-path

clip-path: polygon(74.5% 50.0%, 75.1% 75.1%, 50.0% 89.9%, 28.8% 71.2%, 17.6% 50.0%, 29.8% 29.8%, 50.0% 5.0%, 74.9% 25.1%);

Related tools

SVG Wave GeneratorCSS

Generate customizable SVG wave dividers with amplitude, frequency, and layers.

SVG OptimizerImage

Optimize SVG by removing comments, metadata, and whitespace.

SVG to CSS BackgroundImage

Convert SVG to CSS background-image or mask-image using data URI encoding.

SVG-Edit — Vector Graphics EditorImage

Create and edit SVG vector graphics with shapes, paths, and text, in your browser.

Icônes — Icon Explorer & BrowserImage

Search 200,000+ open-source icons across 170+ sets with instant fuzzy search, then copy or download each as SVG, JSX, Vue, and more.

CSS Gradient GeneratorCSS

Build beautiful CSS gradients visually with a live preview.