blob-svg-mcp

MCP server for generating organic blob shapes as SVG.

Uses sinusoidal harmonics to produce smooth, rounded curves — no sharp corners. Every blob is reproducible via a seed parameter.

Tools

generate_blob

Generate a single blob shape as a complete SVG.

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | size | number | 200 | Width and height in px | | complexity | number | 6 | Number of harmonics (2-12). More = more detailed | | color | string | #6366f1 | Fill color (any CSS color) | | opacity | number | 1 | Fill opacity (0-1) | | randomness | number | 0.5 | Radius irregularity (0 = circle, 1 = very blobby) | | seed | number | random | Seed for reproducible shapes | | stroke | string | — | Optional stroke color | | stroke_width | number | 2 | Stroke width in px |

generate_gradient_blob

Generate a blob filled with a linear gradient.

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | size | number | 200 | Width and height in px | | complexity | number | 6 | Number of harmonics (2-12) | | gradient_colors | string[] | ["#6366f1", "#ec4899"] | Gradient stop colors | | gradient_angle | number | 0 | Gradient angle in degrees | | opacity | number | 1 | Fill opacity (0-1) | | randomness | number | 0.5 | Radius irregularity (0-1) | | seed | number | random | Seed for reproducible shapes |

generate_blob_set

Generate multiple blobs scattered on a canvas. Useful for backgrounds and hero sections.

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | count | number | 12 | Number of blobs | | canvas_width | number | 800 | Canvas width in px | | canvas_height | number | 600 | Canvas height in px | | colors | string[] | ["#6366f1", "#8b5cf6", "#a78bfa", "#c4b5fd"] | Color palette | | min_size | number | 80 | Minimum blob size in px | | max_size | number | 250 | Maximum blob size in px | | complexity | number | 6 | Harmonics per blob (2-12) | | opacity | number | 0.6 | Fill opacity (0-1) | | randomness | number | 0.5 | Radius irregularity (0-1) | | seed | number | random | Seed for reproducible compositions |

generate_blob_path

Generate only the SVG path data (the d attribute). Useful for embedding in your own SVG.

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | size | number | 200 | Coordinate space size | | complexity | number | 6 | Number of harmonics (2-12) | | randomness | number | 0.5 | Radius irregularity (0-1) | | seed | number | random | Seed for reproducible paths |

Setup

With Claude Code

claude mcp add blob-svg -- npx blob-svg-mcp

Manual (settings.json)

{
  "mcpServers": {
    "blob-svg": {
      "command": "npx",
      "args": ["blob-svg-mcp"]
    }
  }
}

From source

git clone https://github.com/Rixmerz/blob-svg-mcp.git
cd blob-svg-mcp
npm install
npm run build

Then point your MCP config to the built file:

{
  "mcpServers": {
    "blob-svg": {
      "command": "node",
      "args": ["/path/to/blob-svg-mcp/build/index.js"]
    }
  }
}

How it works

Each blob is generated by:

1. Placing 36 sample points around a circle
2. Deforming the radius at each point using summed sinusoidal harmonics (amplitude decays with frequency, so high-frequency harmonics add detail without spikes)
3. Converting the points to a smooth closed path using Catmull-Rom to cubic Bezier conversion with tension factor 1/4

The result is always an organic, rounded shape — never angular.

License

MIT