Submit
Rixmerz

blob-svg-mcp

Community Rixmerz
Updated

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

MCP Server ยท Populars

MCP Server ยท New