Python SVG 程序化生成工具 - 网格、分形、图表、图标一键生成与优化

svg-art by kv0906/cc-skills

187 周安装量

11 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/kv0906/cc-skills --skill svg-art

图形渲染数据可视化自动化

🇨🇳中文介绍

SVG 艺术：程序化生成

使用 Python 脚本生成高质量的 SVG 图形。所有脚本都将有效的 SVG 输出到 stdout（或使用 -o 参数输出到文件）。

可用脚本

脚本	用途	关键选项
`generate_grid.py`	网格图案	`--cols`, `--rows`, `--shape`, `--vary-*`
`generate_radial.py`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

FlyClaw：零登录航班聚合查询工具，Python实现多源航班信息与价格搜索

4,000,000 周安装

Azure RBAC 权限管理工具：查找最小角色、创建自定义角色与自动化分配

123,100 周安装

README 国际化工具：自动化翻译与多语言文档管理 | readme-i18n

32,900 周安装

GitHub Actions 官方文档查询助手 - 精准解答 CI/CD 工作流问题

31,800 周安装

# 带尺寸变化的网格
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

# 优化现有 SVG
python scripts/optimize_svg.py input.svg --aggressive -o output.svg

python scripts/generate_grid.py \
  -c 8 -r 8           # 列和行
  -s 10 -g 2          # 尺寸和间距
  --shape circle      # rect, circle, 或 diamond
  --vary-size         # 随机尺寸变化
  --vary-opacity      # 随机透明度
  --vary-hue          # 颜色变化
  --seed 42           # 可重现的随机性

# 同心圆环
python scripts/generate_radial.py --concentric --rings 5 --vary-hue

# 旭日光线
python scripts/generate_radial.py --sunburst -n 24 --vary-length

# 科赫雪花
python scripts/generate_fractal.py --koch --depth 4 --fill "#3B82F6"

# 谢尔宾斯基三角形
python scripts/generate_fractal.py --sierpinski --depth 5

# 带数据点的折线图
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"

# 列出所有可用图标
python scripts/generate_icon.py --list

# 常用图标：check, x, plus, menu, search, home, user, settings,
# mail, heart, star, play, file, download, edit, share, sun, moon, 等。

通用选项（所有脚本）

--fill COLOR: 填充颜色（默认：#3B82F6）
--stroke COLOR: 描边颜色
--stroke-width N: 描边宽度
--seed N: 用于可重现性的随机种子
-o FILE: 输出到文件而不是 stdout

脚本可以串联使用：

# 生成并优化
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

请参阅 references/svg-fundamentals.md 了解：

核心 SVG 结构和 viewBox
元素类型（rect, circle, path 等）
路径命令语法
渐变和图案
可访问性要求

🇺🇸English

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

Weekly Installs

187

Repository

kv0906/cc-skills

GitHub Stars

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode170

codex165

gemini-cli164

github-copilot154

kimi-cli132

amp131

通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南

31,600 周安装