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:
- Placing 36 sample points around a circle
- Deforming the radius at each point using summed sinusoidal harmonics (amplitude decays with frequency, so high-frequency harmonics add detail without spikes)
- 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
