# SVG Skeleton Patterns Geometric base skeletons for the eight metaphor types referenced in `SKILL.md` Stage 3. These are starting points, not finished art. **How to use:** pick a skeleton matching your idea's metaphor type, paste into the card, then adapt: - Labels and text content (the most important adaptation) - Number of boxes / nodes / steps (match the real structure) - Colors (stay within the warm muted palette; use the page accent colors) - Proportions if needed **What not to change:** the basic geometry — these were drawn to render correctly across viewport sizes. Don't randomize coordinates. The default palette used below: `#ffcd55` (warm yellow), `#ffd6ca` (soft coral), `#cde4ff` (light blue), `#d7f0de` (mint green), `#1f2430` (dark ink). Pick 2 – 3 per SVG; don't use all five. --- ## 1. Layer stack For: layered concepts, abstraction levels, stacked components, hierarchies where higher layers depend on lower ones. ```html Layer 3 (Label) Layer 2 (Label) Layer 1 (Label) ``` Adapt: number of layers (2 – 5 work), label text, color order (top-down or bottom-up depending on the concept). --- ## 2. Pipeline / conveyor belt For: sequential processes, transformations, data/material flow, ordered steps with arrows. ```html Step 1 Step 2 Step 3 ``` Adapt: number of stages (2 – 5; if more than 5, wrap to a second row or use Funnel instead), step labels, vertical version if it fits the card better. The `marker id` must be unique per page if multiple pipelines appear — use `arr1`, `arr2`, ... --- ## 3. Cross-section For: showing what is inside something — anatomy, internal structure, nested concepts. Concentric circles read as "core surrounded by layers". ```html Core Middle layer Outer ``` Adapt: number of rings (2 – 4), labels, color order. For asymmetric internals, use a single circle with internal partitioning lines instead. --- ## 4. Before / after For: change, transformation, improvement, before/after states. ```html BEFORE State A AFTER State B ``` Adapt: state labels (the boxes should say what the state IS, not just "A" and "B"); optionally add a small caption above the arrow with the mechanism that drove the change. --- ## 5. Node graph For: networks, relationships, dependencies, hub-and-spoke patterns. ```html A B Center C D ``` Adapt: node labels (single letters become real names — "Codex", "Gateway", "Senox" — never leave as "A/B/C"), number of peripheral nodes (3 – 5), edge directions (add markers if directed). --- ## 6. Funnel For: filtering, narrowing-down, conversion, "many in → few out". ```html Many inputs Filter Output ``` Adapt: stage labels (be concrete: "100 applications", "20 interviews", "3 hires" beats generic "input/filter/output"). 2 or 4 stages work too if you adjust the polygons. --- ## 7. Growth curve For: growth, decay, trends over time, exponential or linear trajectories. ```html Start Turn Goal Time -> Growth → ``` Adapt: axis labels (be concrete: "MAU" or "GB" instead of "Growth"; "Q1 -> Q4" instead of "time"), curve shape (use straight `L` segments for linear, current `Q`/`T` curves for exponential, decay version with descending curve). --- ## 8. Circuit / logic flow For: logical wiring, if/then chains, switches, conditional flow. ```html Input If? Yes path yes No path no ``` Adapt: replace generic labels ("Input", "Yes path") with the actual input and outcome from the source. Chain two diamonds for multi-step conditionals. --- ## When to use which | Concept | Pattern | |---|---| | Things built on top of each other | Layer stack | | One thing turns into another, step by step | Pipeline | | What's hidden inside something | Cross-section | | State changed because of X | Before / after | | Things connected to each other | Node graph | | Many things become few things | Funnel | | Something grows or shrinks over time | Growth curve | | Decision splits the flow | Circuit / logic flow | If no row fits, the idea is probably too abstract or too small to deserve its own card. Fold it into a neighbor.