MCP Catalogs
← Home

nakkas

by arikusi·★ 8·Score 41

MCP server that turns AI into an SVG artist, generating animated SVG graphics from JSON configuration.

ai-llmdeveloper-toolsmedia
2
Forks
0
Open issues
1 mo ago
Last commit
2d ago
Indexed

Overview

Nakkas is a specialized MCP server that enables AI models to create animated SVG graphics through a declarative JSON configuration system. It provides tools for rendering SVGs, previewing outputs, and saving results in various formats. The server supports both CSS @keyframes and SMIL animations, includes various visual effects filters, and works entirely locally without external dependencies.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

you:Generating animated logos and visual elements for presentations
you:Creating data visualizations with animated transitions
you:Designing UI elements and loading animations for web applications
you:What animation types does Nakkas support?
you:Can I use custom fonts with Nakkas?

When to choose this

Choose Nakkas when you need to generate complex animated SVG graphics through AI without learning SVG syntax, especially for web visuals, data visualization, or design prototyping.

When NOT to choose this

Don't choose Nakkas if you need interactive SVG elements with event handlers (onclick) or require advanced text features like custom font loading in static environments.

Tools this server exposes

3 tools extracted from the README
  • render_svg(SVGConfig) => { svg: string, warnings?: string[] }

    Renders an SVG based on a JSON configuration object

  • preview(content: string) => string

    Converts rendered content into a PNG image for visual inspection

  • save(content: string, outputPath: string, format?: 'auto' | 'svg' | 'png') => string

    Saves rendered content to disk as SVG or PNG

Comparable tools

svg-editinkscapefigma-api

Installation

Installation

Claude Desktop

Add to your config file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "nakkas": {
      "command": "npx",
      "args": ["-y", "nakkas@latest"]
    }
  }
}

Claude Code (CLI)

claude mcp add nakkas npx nakkas@latest

FAQ

What animation types does Nakkas support?
Nakkas supports both CSS @keyframe animations and SMIL animations (animate, animateTransform, animateMotion).
Can I use custom fonts with Nakkas?
Yes, system fonts work everywhere without loading, and custom font families are accepted when available in the rendering environment.

Compare nakkas with

nakkas vs ultimate_mcp_servernakkas vs mcp-server-chartnakkas vs everythingnakkas vs filesystemnakkas vs time
GitHub →

Last updated · Auto-generated from public README + GitHub signals.