SVG Blob Shape Generator

Create organic vector shape blobs with custom gradients. Export as raw SVG code or React JSX components.

Settings

Blob Edges (Vertices)6

Spikiness (Complexity)60%

Fill Mode

Color Start

Color End

Raw SVG XML Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
</svg>

React JSX Component

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
  </svg>
);