nakkas

# Nakkas

> MCP server that turns AI into an SVG artist. One flexible rendering engine, AI decides everything via JSON config. Produces animated, production-ready SVGs with mathematical curves, pattern layouts and filter effects.

## What It Does

Nakkas exposes three MCP tools:

* `render_svg` takes a structured JSON config describing an SVG scene, renders it, and returns a PNG preview plus a server-side artifact id and design analysis notes. Add output:{svg:true} to also get the SVG text. No templates, no presets. The AI is the creative director.
* `preview` re-renders a stored artifact (by id) or a raw SVG string to a PNG image (base64) for visual inspection.
* `save` saves a stored artifact (by id) or raw content to disk as SVG (text) or PNG (raster). Auto-increments filename to prevent overwriting.

## Key Links

* README: https://github.com/arikusi/nakkas/blob/main/README.md
* Full documentation (single file for LLM context): https://github.com/arikusi/nakkas/blob/main/llms-full.txt
* Dogfooding log (how each release is verified, prompts + iterations + assets): https://github.com/arikusi/nakkas/blob/main/dogfooding.md
* npm package: https://www.npmjs.com/package/nakkas
* Source code: https://github.com/arikusi/nakkas

## Quick Install

```json
{ "mcpServers": { "nakkas": { "command": "npx", "args": ["-y", "nakkas@latest"] } } }
```

## Core Capabilities

* Shapes: rect, circle, ellipse, line, polyline, polygon, path, image
* Text: positioned text, tspan spans, text along path
* Pattern layouts: radial-group, arc-group, grid-group, scatter-group, path-group
* Parametric curves: rose, heart, star, lissajous, spiral, superformula, epitrochoid, hypotrochoid, wave
* Gradients: linearGradient, radialGradient (with animated color stops)
* SVG pattern tile fills for repeating textures
* Arrowhead markers for diagrams (triangle, arrow, circle, square, diamond, bar) on line, polyline and path
* Filter presets: glow, neon, blur, drop-shadow, glitch, chromatic-aberration, noise, outline, inner-shadow, emboss, grayscale, sepia, invert, saturate, hue-rotate (plus raw filter primitives)
* CSS @keyframes animations (opacity, transform, fill, stroke, stroke-dashoffset draw-on and more)
* SMIL animations (path morphing, motion path, animateTransform)
* Groups, symbols, use for element instancing (pattern groups emit one child definition instanced with use)
* ClipPath, mask for advanced compositing

## Output

Pure declarative SVG: no JavaScript, no event handler injection. Works in GitHub READMEs, web pages, design tools, and anywhere SVG renders.