svg-art▌
kv0906/cc-skills · updated Apr 8, 2026
Generate high-quality SVG graphics using Python scripts. All scripts output valid SVG to stdout (or file with -o).
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
| Script | Purpose | Key Options |
|---|---|---|
generate_grid.py |
Grid patterns | --cols, --rows, --shape, --vary-* |
generate_radial.py |
Radial/spiral/sunburst | --spiral, --concentric, --sunburst |
generate_fractal.py |
Fractals (tree, koch, sierpinski) | --tree, --koch, --sierpinski, --depth |
generate_wave.py |
Waves and audio viz | --layers, --noise, --bars |
generate_particles.py |
Scatter/cluster/constellation | --cluster, --gradient, --constellation |
generate_chart.py |
Data visualization | --bar, --line, --pie, --donut |
generate_icon.py |
Common UI icons | --icon NAME, --list, --filled |
optimize_svg.py |
Minify/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
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.8★★★★★53 reviews- ★★★★★William Li· Dec 28, 2024
Solid pick for teams standardizing on skills: svg-art is focused, and the summary matches what you get after install.
- ★★★★★Anaya Brown· Dec 20, 2024
svg-art reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Isabella Gonzalez· Dec 12, 2024
svg-art has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Nikhil Lopez· Dec 8, 2024
svg-art is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Alexander Bansal· Dec 4, 2024
Useful defaults in svg-art — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Hassan Rahman· Nov 27, 2024
svg-art fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Isabella Menon· Nov 23, 2024
Registry listing for svg-art matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Aisha Smith· Nov 11, 2024
I recommend svg-art for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Ava Farah· Oct 18, 2024
We added svg-art from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Charlotte Abebe· Oct 14, 2024
svg-art reduced setup friction for our internal harness; good balance of opinion and flexibility.
showing 1-10 of 53