# svg-art

A skill that generates SVG graphics through code: icons, patterns, fractals, charts and data visualizations via executable Python scripts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 509 installs · ★ 18
- Author: kv0906
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/kv0906/cc-skills/tree/HEAD/skills/svg-art/SKILL.md
- Updated: 2026-10-11
- HTML: https://affpapa.org/en/nevibecode/skills/svg-art

## What it does

The `svg-art` skill gives your agent eight Python scripts that produce SVG files programmatically. Each one targets a different shape family: grids, radial and spiral patterns, fractals (tree, Koch curve, Sierpinski triangle), waves, particles, charts and ready-made UI icons. A separate `optimize_svg.py` minifies existing SVG.

Every script takes flags for the details — column and row counts, element shape, variation in size, opacity and hue, fractal depth, chart data. Pass `--seed` when you need the same random output twice. Results go to stdout or to a file with `-o`, and scripts pipe into each other, so you can generate a grid and optimize it in one line.

The scripts are executable Python, so the agent runs them directly — no Python in the environment means the skill has nothing to call. The repo also ships `references/svg-fundamentals.md`, covering SVG structure, elements, path syntax, gradients and accessibility requirements.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill svg-art -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/svg-art/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/svg-art/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill svg-art -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/svg-art/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill svg-art -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/svg-art/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kv0906/cc-skills svg-art
```

2. **Manually: put the files in place**
- File: `.github/skills/svg-art/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill svg-art -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/kv0906/cc-skills --path skills/svg-art
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/svg-art/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill svg-art -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/kv0906/cc-skills/tree/HEAD/skills/svg-art/SKILL.md

## When to use it
- generate a grid of circles with varied size and opacity
- build a fractal tree at a chosen depth
- turn a list of numbers into a bar or donut chart
- draw a constellation network with distance-based connections
- minify an existing SVG and print optimization stats

## Example prompts
- generate a spiral pattern with 60 points over 4 turns and save it to spiral.svg
- make a bar chart from 30,50,80,45,90 with labels A,B,C,D,E
- optimize input.svg in aggressive mode and show the stats

## Similar
- [svg-icon-generator](https://affpapa.org/en/nevibecode/skills/svg-icon-generator.md) — skill · 1300 installs
- [algorithmic-art](https://affpapa.org/en/nevibecode/skills/nexu-io-algorithmic-art.md) — skill · 2800 installs
- [svg-animation](https://affpapa.org/en/nevibecode/skills/svg-animation.md) — skill · 2500 installs
- [svg-animations](https://affpapa.org/en/nevibecode/skills/svg-animations.md) — skill · 2600 installs
- [blog-chart](https://affpapa.org/en/nevibecode/skills/blog-chart.md) — skill · 2500 installs
- [logo-design](https://affpapa.org/en/nevibecode/skills/logo-design.md) — skill · 1100 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md