Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
kv0906 avatar

Svg Art

  • 417 installs
  • 14 repo stars
  • Updated July 30, 2026
  • kv0906/cc-skills

svg-art is a Claude Code skill that generates clean, scalable SVG illustrations and icons for sites, docs, and UI chrome—optimized paths, viewBox, and theme-aware palettes.

About

svg-art is a kv0906/cc-skills agent skill that creates vector graphics through eight executable Python scripts outputting valid SVG to stdout or files via -o. Scripts cover generate_grid.py for grid patterns, generate_radial.py for spirals and sunbursts, generate_fractal.py for tree, Koch, and Sierpinski fractals, generate_wave.py for audio visualizations, generate_particles.py for constellations, generate_chart.py for bar, line, pie, and donut charts, generate_icon.py with 40+ UI icons, and optimize_svg.py for minification. Common CLI flags include --fill, --stroke, --stroke-width, --seed for reproducibility, and -o for file output with default fill #3B82F6. Developers reach for svg-art when they need parameterized icons, diagrams, or generative art for documentation and UI without manual Figma or Illustrator work.

  • Hand-authored SVG output
  • Icon and illustration patterns
  • Optimized paths and viewBox
  • Theme-friendly color tokens
  • Embeddable React/HTML usage

Svg Art by the numbers

  • 417 all-time installs (skills.sh)
  • +13 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #431 of 1,335 Generative Media skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kv0906/cc-skills --skill svg-art

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs417
repo stars14
Last updatedJuly 30, 2026
Repositorykv0906/cc-skills

How do you generate SVG icons and charts programmatically?

Generate clean, scalable SVG illustrations and icons for sites, docs, and UI chrome—optimized paths, viewBox, and theme-aware palettes.

Who is it for?

Frontend developers and technical writers who need reproducible SVG icons, charts, fractals, or diagrams from CLI Python scripts without a design tool.

Skip if: Designers needing raster photo editing, complex manual Bézier illustration, or brand systems that require proprietary Figma component libraries only.

When should I use this skill?

A developer asks to create SVG icons, logos, data charts, fractal art, grid patterns, or optimize existing SVG path output for web or docs.

What you get

Valid SVG files or stdout output for icons, charts, fractals, patterns, and minified vector assets with reproducible --seed parameters.

  • SVG icon files
  • chart diagrams
  • optimized vector assets

By the numbers

  • Bundles 8 Python SVG generation scripts
  • generate_icon.py includes 40+ UI icons

Files

SKILL.mdMarkdownGitHub ↗

SVG Art: Programmatic Generation

Generate high-quality SVG graphics using Python scripts. All scripts output valid SVG to stdout (or file with -o).

Available Scripts

ScriptPurposeKey Options
generate_grid.pyGrid patterns--cols, --rows, --shape, --vary-*
generate_radial.pyRadial/spiral/sunburst--spiral, --concentric, --sunburst
generate_fractal.pyFractals (tree, koch, sierpinski)--tree, --koch, --sierpinski, --depth
generate_wave.pyWaves and audio viz--layers, --noise, --bars
generate_particles.pyScatter/cluster/constellation--cluster, --gradient, --constellation
generate_chart.pyData visualization--bar, --line, --pie, --donut
generate_icon.pyCommon UI icons--icon NAME, --list, --filled
optimize_svg.pyMinify/optimize SVG--aggressive, --stats

Quick Examples

# Grid with size variation
python scripts/generate_grid.py -c 6 -r 6 --vary-size --vary-opacity -o grid.svg

# Spiral pattern
python scripts/generate_radial.py --spiral -n 60 --turns 4 -o spiral.svg

# Fractal tree
python scripts/generate_fractal.py --tree --depth 8 --vary-angle -o tree.svg

# Layered waves with fill
python scripts/generate_wave.py --layers 5 --fill -o waves.svg

# Constellation network
python scripts/generate_particles.py --constellation -n 30 --connect-distance 25 -o network.svg

# Bar chart
python scripts/generate_chart.py --bar --data "30,50,80,45,90" --labels "A,B,C,D,E" -o chart.svg

# Heart icon
python scripts/generate_icon.py --icon heart --filled --stroke "#E11D48" -o heart.svg

# Optimize existing SVG
python scripts/optimize_svg.py input.svg --aggressive -o output.svg

Script Usage Patterns

Grid Patterns

python scripts/generate_grid.py \
  -c 8 -r 8           # columns and rows
  -s 10 -g 2          # size and gap
  --shape circle      # rect, circle, or diamond
  --vary-size         # random size variation
  --vary-opacity      # random opacity
  --vary-hue          # color variation
  --seed 42           # reproducible randomness

Radial Patterns

# Concentric rings
python scripts/generate_radial.py --concentric --rings 5 --vary-hue

# Sunburst rays
python scripts/generate_radial.py --sunburst -n 24 --vary-length

Fractals

# Koch snowflake
python scripts/generate_fractal.py --koch --depth 4 --fill "#3B82F6"

# Sierpinski triangle
python scripts/generate_fractal.py --sierpinski --depth 5

Charts

# Line chart with points
python scripts/generate_chart.py --line --data "10,30,20,50" --show-points --smooth

# Donut chart
python scripts/generate_chart.py --donut --data "40,30,20,10" --labels "A,B,C,D"

Icons

# List all available icons
python scripts/generate_icon.py --list

# Common icons: check, x, plus, menu, search, home, user, settings,
# mail, heart, star, play, file, download, edit, share, sun, moon, etc.

Common Options (All Scripts)

  • --fill COLOR: Fill color (default: #3B82F6)
  • --stroke COLOR: Stroke color
  • --stroke-width N: Stroke width
  • --seed N: Random seed for reproducibility
  • -o FILE: Output to file instead of stdout

Piping and Composition

Scripts can be piped together:

# Generate and optimize
python scripts/generate_grid.py -c 10 -r 10 | python scripts/optimize_svg.py --aggressive

# Check optimization stats
python scripts/generate_fractal.py --tree --depth 10 | python scripts/optimize_svg.py --stats

SVG Fundamentals Reference

See references/svg-fundamentals.md for:

  • Core SVG structure and viewBox
  • Element types (rect, circle, path, etc.)
  • Path command syntax
  • Gradients and patterns
  • Accessibility requirements

Related skills

How it compares

Pick svg-art over manual SVG editing when developers need CLI-generated icons, charts, or fractals with reproducible seeds and built-in optimization.

FAQ

What scripts does svg-art include?

svg-art bundles eight Python scripts: generate_grid, generate_radial, generate_fractal, generate_wave, generate_particles, generate_chart, generate_icon, and optimize_svg. Each outputs valid SVG to stdout or a file with the -o flag.

How many icons does svg-art provide?

svg-art's generate_icon.py ships 40+ common UI icons accessible via --icon NAME and --list flags. Icons support --filled styling and standard --fill and --stroke color options.

Can svg-art output be reproducible?

svg-art scripts accept a --seed N flag for deterministic random variation across fractals, particles, and pattern generators. Default fill color is #3B82F6 and output pipes to optimize_svg.py for minification.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.