# 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

```bash
claude mcp add blob-svg -- npx blob-svg-mcp
```

### Manual (settings.json)

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

### From source

```bash
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:

```json
{
  "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