| name | logo-explore-svg |
| description | Generate 25+ programmatic SVG logo variations in a comparison gallery — explore shapes, topologies, palettes. Triggers: "logo shapes" | "svg logo gallery" | "shape exploration" | "dot and line logo" | "logo shape variations". |
| version | 0.2.0 |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep, ToolSearch |
Logo Explore (SVG)
Goal: Generate 25+ programmatic SVG logo variations in a single gallery page for quick shape and color exploration.
Phase 1 — Context Discovery
-
Identify target project: $ARGUMENTS name/path → cwd (CLAUDE.md, README.md, package.json, pyproject.toml).
-
Check brand assets:
charter="$HOME/.roxabi-vault/config/visual-charter.json"
[ -f "$charter" ] && echo "CHARTER_FOUND" && cat "$charter" || echo "NO_CHARTER"
- Research project identity: read
CLAUDE.md, README.md, docs, configs — extract metaphors, shapes, personality.
Phase 2 — Theme Selection
→ present multi-select
- Dot + Line — nodes connected by thin lines (constellation, network, molecule, trinity)
- Hex Cells — hexagonal tessellation, honeycomb clusters, nested hexes
- Concentric Rings — orbital circles with satellite dots, ring networks
- Geometric Shapes — diamonds, pentagons, triangles with vertex dots
- Mixed / Custom — describe direction or combine themes
Phase 3 — Palette Setup
Define 6 palettes to rotate across variations. CH exists → its colors as primary palette + 5 complementary alternatives. Otherwise:
const PAL = {
orange: { primary: "#FF6B35", secondary: "#FF8F5E", bg: "#0D0D0D", surface: "#1C1C1E", nameColor: "#FF6B35" },
cyan: { primary: "#06B6D4", secondary: "#67E8F9", bg: "#0A0F1A", surface: "#111827", nameColor: "#67E8F9" },
purple: { primary: "#8B5CF6", secondary: "#C084FC", bg: "#0D0B14", surface: "#1A1625", nameColor: "#C084FC" },
green: { primary: "#4ADE80", secondary: "#22D3EE", bg: "#000000", surface: "#0A0A0A", nameColor: "#4ADE80" },
gold: { primary: "#F59E0B", secondary: "#FBBF24", bg: "#0D0B14", surface: "#1A1625", nameColor: "#FBBF24" },
earth: { primary: "#6B8F71", secondary: "#C4A87C", bg: "#1A1A18", surface: "#252520", nameColor: "#6B8F71" },
};
Phase 4 — Generate Gallery
- Read
${CLAUDE_PLUGIN_ROOT}/scripts/svg-gallery-template.html as structural shell.
- Write 25 card entries in 4-5 sections. ∀ card: unique SVG mark in
<svg viewBox="0 0 100 110"> (5-15 elements); label + concept description; palette rotation (6 palettes); number badge.
SVG helpers: dot(cx,cy,r,fill,opacity)→<circle>; line(x1,y1,x2,y2,stroke,width,opacity)→<line>; connect(nodes,edges,primary,secondary,opts)→batch. Vary one parameter per variation (count/density/rotation/palette/topology). Sections: e.g. "Core Form", "Clusters", "Density Variations", "Rotations", "Symbolic".
- Write to
<project-root>/brand/svg-gallery.html.
xdg-open "<project-root>/brand/svg-gallery.html"
Phase 5 — Pick & Iterate
→ present choice Pick favorites (by number) | New theme | Done
- Favorites + new gallery → 25 variations on selected shapes (vary density/palette/rotation/hybridize).
- New theme → Phase 2.
- Done → summarize favorites; suggest:
/logo-design for animated production logo, /logo-explore-ai for photorealistic AI render.
$ARGUMENTS
