Log inSubmit server
Nakkas logo

Nakkas

by arikusi

Creates animated SVG artwork from JSON, returns PNG previews, and saves refined designs as SVG or PNG files.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Nakkas

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "arikusi-nakkas": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 3 tools correctly (22d ago).

Overview

The arikusi/nakkas MCP server lets AI assistants generate animated SVG graphics from declarative JSON configurations. It renders designs with CSS keyframes and SMIL, then returns a PNG preview and server-side artifact ID for critique and revision. Reach for it when you need logos, badges, banners, icons, generative art, or other SVG designs that can be iterated visually before saving.

Use cases

  • Generate animated SVG logos
  • Create README banners and profile badges
  • Prototype loading spinners and interface graphics
  • Build parametric and generative artwork
  • Preview and refine SVG animation before saving

Key features

  • JSON-driven animated SVG rendering
  • PNG previews with server-side artifact IDs
  • CSS keyframes and SMIL animation support
  • Parametric curves and repetitive pattern groups
  • SVG and PNG file saving
  • Design analysis warnings for layout and contrast

Tools3

What Nakkas lets your agent do. Expand a tool for its parameters.

Verified live~2.3k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

7/7 checks healthy over the last 78d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 10d ago via OSV.dev · nakkas@latest (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars30Stargazers on the source repository.
npm downloads646Package downloads in the last 30 days.
Last commit3mo agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed3Callable tools this server registers over MCP.
Directory activity4 viewsConfig copies, upvotes, and views on AllMCPs.

How Nakkas works

What arikusi/nakkas MCP server does

The arikusi/nakkas MCP server converts structured JSON into SVG artwork for use in logos, icons, loading indicators, README banners, badges, charts, and generative designs. Its output is pure SVG XML, with animation provided by CSS @keyframes and SMIL rather than JavaScript. The renderer can also produce a PNG image so an AI assistant can inspect the result.

The main generation tool accepts an SVG configuration containing a canvas, optional definitions, elements, animations, and output preferences. Each element requires a type field. Supported shapes include rectangles, circles, ellipses, lines, paths, polygons, images, text, text paths, groups, instances, and several pattern-oriented group types. Parametric elements can generate rose, heart, Lissajous, spiral, star, superformula, epitrochoid, hypotrochoid, and wave curves.

How it works

A typical workflow starts with render_svg. The server keeps the generated SVG as an artifact and returns its identifier with a PNG preview. The assistant can inspect that image, adjust the JSON, and render another version without sending the full SVG through its context. The supplied workflow recommends several preview-and-revision passes before saving.

The preview tool can render an existing artifact or raw SVG at a selected width. A normal preview represents the initial animation state, while the frames option creates a filmstrip of two to ten sampled CSS-animation states. This helps check rotation, timing, easing, and other motion details. SMIL animation is not included in those sampled frames.

The save tool accepts an artifact ID or raw SVG. It can write SVG text or rasterize the content to PNG. Automatic format selection uses the output filename extension, and an existing file receives a numeric suffix instead of being overwritten. Artifacts remain available only for the server process lifetime, with a maximum of 32 stored and older entries evicted.

Setup and configuration

The arikusi/nakkas MCP server runs locally through the npm package and does not require cloud credentials or API keys. For Claude Desktop, Cursor, Zed, and similar MCP clients, configure a server command using npx -y nakkas@latest. Claude Code can add the same server with claude mcp add nakkas npx nakkas@latest.

For development, clone the repository, run npm install && npm run build, and use dist/index.js as the command. No environment variables are specified as required.

Configurations must use the server's field names rather than assuming raw SVG syntax. Text uses content, text paths use pathId, and groups use a children array. Pattern groups accept one child positioned at the local origin. Gradients use linearGradient or radialGradient; filters use the preset form when selecting a built-in filter. Hex colors are required for gradient stops and filter colors, and keyframe offsets use from, to, or numeric percentages.

Tools and capabilities

  • render_svg: Generates animated SVG from JSON and returns a PNG preview, artifact ID, and possible design-analysis notes.
  • preview: Re-renders an artifact or raw SVG, optionally at a different width.
  • save: Writes an artifact or raw SVG as SVG text or PNG image.
  • Definitions can include gradients, filters, clipping paths, masks, patterns, markers, symbols, and reusable paths.
  • Pattern groups support radial, arc, grid, scatter, and path-based repetition.
  • Built-in filter presets include effects such as glow, neon, blur, drop shadow, glitch, noise, outline, and emboss.
  • Output options can include the SVG text, skip the preview, resize the preview, minify stored output, or generate animation filmstrips.

Limitations and notes

A single preview shows a static snapshot, so it does not establish that an animation behaves correctly. Use sampled frames for CSS motion; SMIL remains unsampled. The renderer returns transparent backgrounds by default unless the canvas specifies another background.

Pattern-group children are constrained to one element, and nested groups are not supported inside the ordinary group element. For radial or arc arrangements, children are expected to be drawn along the local x-axis when rotation is enabled; using the y-axis can produce an unintended chord-like ring. The server may report overflow, text overlap, missing transform settings, excessive concurrent animation, or contrast issues after rendering. These notes are checks to review, not automatic design fixes.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Nakkas

arikusi/nakkas is an MCP server that connects AI assistants to a local SVG rendering engine. Its main tools, render_svg, preview, and save, generate animated SVG from JSON, return PNG previews for visual review, re-render artifacts, and save refined designs as SVG text or PNG images.

Install it by configuring your MCP client to run npx -y nakkas@latest. Claude Desktop, Cursor, and Zed use a server entry with that command, while Claude Code can run claude mcp add nakkas npx nakkas@latest.

Use the preview tool with either an artifact ID returned by render_svg or a raw SVG string. You can provide a width to scale the PNG result; render_svg already includes a preview by default.

Use the save tool with an artifact or raw SVG, an output path, and format set to png. The server renders the SVG to a raster image before writing it, and adds a numeric suffix if the target file already exists.

Yes. Cursor can run arikusi/nakkas as a standard MCP server using the command npx with the argument -y nakkas@latest in its MCP configuration.

Related MCP servers

All in Art & Culture All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewNakkas AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/arikusi-nakkas?style=directory)](https://allmcps.com/mcp/arikusi-nakkas)
HTML Embed
<a href="https://allmcps.com/mcp/arikusi-nakkas"><img src="https://allmcps.com/api/badge/arikusi-nakkas?style=directory" alt="Nakkas on AllMCPs" /></a>