| name | svg-art |
| description | Create SVG graphics through programmatic code generation. Use this skill when the user asks to create icons, logos, illustrations, diagrams, data visualizations, generative art, patterns, fractals, or any vector graphics. Provides executable Python scripts for grids, radial patterns, fractals, waves, particles, charts, icons, and optimization. |
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
python scripts/generate_grid.py -c 6 -r 6 --vary-size --vary-opacity -o grid.svg
python scripts/generate_radial.py --spiral -n 60 --turns 4 -o spiral.svg
python scripts/generate_fractal.py --tree --depth 8 --vary-angle -o tree.svg
python scripts/generate_wave.py --layers 5 --fill -o waves.svg
python scripts/generate_particles.py --constellation -n 30 --connect-distance 25 -o network.svg
python scripts/generate_chart.py --bar --data "30,50,80,45,90" --labels "A,B,C,D,E" -o chart.svg
python scripts/generate_icon.py --icon heart --filled --stroke "#E11D48" -o heart.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
-s 10 -g 2
--shape circle
--vary-size
--vary-opacity
--vary-hue
--seed 42
Radial Patterns
python scripts/generate_radial.py --concentric --rings 5 --vary-hue
python scripts/generate_radial.py --sunburst -n 24 --vary-length
Fractals
python scripts/generate_fractal.py --koch --depth 4 --fill "#3B82F6"
python scripts/generate_fractal.py --sierpinski --depth 5
Charts
python scripts/generate_chart.py --line --data "10,30,20,50" --show-points --smooth
python scripts/generate_chart.py --donut --data "40,30,20,10" --labels "A,B,C,D"
Icons
python scripts/generate_icon.py --list
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:
python scripts/generate_grid.py -c 10 -r 10 | python scripts/optimize_svg.py --aggressive
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