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
1---2name: svg-art3description: 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.4---5
6# SVG Art: Programmatic Generation
7
8Generate high-quality SVG graphics using Python scripts. All scripts output valid SVG to stdout (or file with `-o`).
9
10## Available Scripts
11
12| Script | Purpose | Key Options |
13|--------|---------|-------------|
14| `generate_grid.py` | Grid patterns | `--cols`, `--rows`, `--shape`, `--vary-*` |
15| `generate_radial.py` | Radial/spiral/sunburst | `--spiral`, `--concentric`, `--sunburst` |
16| `generate_fractal.py` | Fractals (tree, koch, sierpinski) | `--tree`, `--koch`, `--sierpinski`, `--depth` |
17| `generate_wave.py` | Waves and audio viz | `--layers`, `--noise`, `--bars` |
18| `generate_particles.py` | Scatter/cluster/constellation | `--cluster`, `--gradient`, `--constellation` |
19| `generate_chart.py` | Data visualization | `--bar`, `--line`, `--pie`, `--donut` |
20| `generate_icon.py` | Common UI icons | `--icon NAME`, `--list`, `--filled` |
21| `optimize_svg.py` | Minify/optimize SVG | `--aggressive`, `--stats` |
22
23## Quick Examples
24
25```bash
26# Grid with size variation
27python scripts/generate_grid.py -c 6 -r 6 --vary-size --vary-opacity -o grid.svg
28
29# Spiral pattern
30python scripts/generate_radial.py --spiral -n 60 --turns 4 -o spiral.svg
31
32# Fractal tree
33python scripts/generate_fractal.py --tree --depth 8 --vary-angle -o tree.svg
34
35# Layered waves with fill
36python scripts/generate_wave.py --layers 5 --fill -o waves.svg
37
38# Constellation network
39python scripts/generate_particles.py --constellation -n 30 --connect-distance 25 -o network.svg
40
41# Bar chart
42python scripts/generate_chart.py --bar --data "30,50,80,45,90" --labels "A,B,C,D,E" -o chart.svg
43
44# Heart icon
45python scripts/generate_icon.py --icon heart --filled --stroke "#E11D48" -o heart.svg
46
47# Optimize existing SVG
48python scripts/optimize_svg.py input.svg --aggressive -o output.svg
49```
50
51## Script Usage Patterns
52
53### Grid Patterns
54```bash
55python scripts/generate_grid.py \
56 -c 8 -r 8 # columns and rows
57 -s 10 -g 2 # size and gap
58 --shape circle # rect, circle, or diamond
59 --vary-size # random size variation
60 --vary-opacity # random opacity
61 --vary-hue # color variation
62 --seed 42 # reproducible randomness
63```
64
65### Radial Patterns
66```bash
67# Concentric rings
68python scripts/generate_radial.py --concentric --rings 5 --vary-hue
69
70# Sunburst rays
71python scripts/generate_radial.py --sunburst -n 24 --vary-length
72```
73
74### Fractals
75```bash
76# Koch snowflake
77python scripts/generate_fractal.py --koch --depth 4 --fill "#3B82F6"
78
79# Sierpinski triangle
80python scripts/generate_fractal.py --sierpinski --depth 5
81```
82
83### Charts
84```bash
85# Line chart with points
86python scripts/generate_chart.py --line --data "10,30,20,50" --show-points --smooth
87
88# Donut chart
89python scripts/generate_chart.py --donut --data "40,30,20,10" --labels "A,B,C,D"
90```
91
92### Icons
93```bash
94# List all available icons
95python scripts/generate_icon.py --list
96
97# Common icons: check, x, plus, menu, search, home, user, settings,
98# mail, heart, star, play, file, download, edit, share, sun, moon, etc.
99```
100
101## Common Options (All Scripts)
102
103- `--fill COLOR`: Fill color (default: #3B82F6)
104- `--stroke COLOR`: Stroke color
105- `--stroke-width N`: Stroke width
106- `--seed N`: Random seed for reproducibility
107- `-o FILE`: Output to file instead of stdout
108
109## Piping and Composition
110
111Scripts can be piped together:
112```bash
113# Generate and optimize
114python scripts/generate_grid.py -c 10 -r 10 | python scripts/optimize_svg.py --aggressive
115
116# Check optimization stats
117python scripts/generate_fractal.py --tree --depth 10 | python scripts/optimize_svg.py --stats
118```
119
120## SVG Fundamentals Reference
121
122See [references/svg-fundamentals.md](references/svg-fundamentals.md) for:
123- Core SVG structure and viewBox
124- Element types (rect, circle, path, etc.)
125- Path command syntax
126- Gradients and patterns
127- Accessibility requirements
kv0906