svg-art-skill_skill

Overview

This skill generates high-quality SVG graphics by producing executable Python scripts that output vector art. It covers grids, radial patterns, fractals, waves, particle systems, charts, and icons, plus an optimizer to minify and analyze SVG output. Use it to create reproducible, parameterized SVG assets suitable for UI, web, print, or generative art experiments.

How this skill works

Each script accepts command-line options to control geometry, color, randomness, and output. Scripts emit valid SVG to stdout or write files with -o, so outputs can be piped into the optimizer or other tools. Common flags include fill, stroke, stroke-width, seed for reproducibility, and mode-specific parameters like rows/cols, depth, layers, or data values.

When to use it

• Generate scalable icons, logos, or UI assets programmatically.
• Create generative illustrations, patterns, fractals, or radial art.
• Produce data visualizations (bar, line, pie, donut) as SVG.
• Prototype tiled or grid-based backgrounds and responsive patterns.
• Build particle-based visuals such as constellations or clusters.
• Optimize SVG output for web delivery or further processing.

Best practices

• Pin a seed for reproducible random variations when you need consistent results.
• Prefer viewBox-based sizing so SVGs scale cleanly across screen sizes.
• Use the optimizer after generation to remove redundant attributes and shrink file size.
• Compose scripts in pipelines: generate → optimize → post-process for toolchain flexibility.
• Start with conservative depth/iterations for fractals and increase only when performance allows.

Example use cases

• Produce a set of UI icons (check, heart, menu) programmatically for a design system.
• Generate a tiled grid with color and size variation for a website hero background.
• Create a fractal tree or Koch snowflake for print posters and export high-resolution SVG.
• Render a smooth line chart or donut chart from CSV-style data for documentation.
• Make a radial sunburst or spiral motif for a logo exploration and iterate with parameters.
• Compose a constellation network and pipe it into the optimizer before embedding it in HTML.