blob-svg-mcp

blob-svg-mcp

MCP server for generating organic, customizable blob shapes as SVG using sinusoidal harmonics, with tools for single blobs, gradient blobs, blob sets, and raw paths.

Category
Visit Server

README

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

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured