
svg-art
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.
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
# 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
You Might Also Like
Related Skills

coding-agent
Run Codex CLI, Claude Code, OpenCode, or Pi Coding Agent via background process for programmatic control.
openclaw
add-uint-support
Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support for uint16, uint32, uint64 types to operators, kernels, or when user mentions enabling unsigned types, barebones unsigned types, or uint support.
pytorch
at-dispatch-v2
Convert PyTorch AT_DISPATCH macros to AT_DISPATCH_V2 format in ATen C++ code. Use when porting AT_DISPATCH_ALL_TYPES_AND*, AT_DISPATCH_FLOATING_TYPES*, or other dispatch macros to the new v2 API. For ATen kernel files, CUDA kernels, and native operator implementations.
pytorch
skill-writer
Guide users through creating Agent Skills for Claude Code. Use when the user wants to create, write, author, or design a new Skill, or needs help with SKILL.md files, frontmatter, or skill structure.
pytorch
implementing-jsc-classes-cpp
Implements JavaScript classes in C++ using JavaScriptCore. Use when creating new JS classes with C++ bindings, prototypes, or constructors.
oven-sh
implementing-jsc-classes-zig
Creates JavaScript classes using Bun's Zig bindings generator (.classes.ts). Use when implementing new JS APIs in Zig with JSC integration.
oven-sh