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