Animated SVG Diagram Skill

Create standalone .svg files with embedded CSS animations that explain concepts visually. The signature style is a dark-themed, modern aesthetic with animated flowing arrows, glowing accents, and clear visual hierarchy.

Design Philosophy

The goal is to make information feel alive. Static diagrams are forgettable — animated arrows that flow between nodes draw the eye along the intended reading path, making complex relationships intuitive. The dark background with selective glow effects creates natural focal points, guiding attention to what matters.

Before You Start

1. Read references/patterns.md in this skill directory — it contains all the reusable SVG building blocks (animated arrows, node styles, glow filters, color palettes, layout templates).
2. Identify which diagram type fits the user's request (see Diagram Types below).
3. Plan the content structure before writing SVG — map out nodes, connections, and hierarchy.

Diagram Types

1. Comparison Diagram

Two side-by-side cards contrasting concepts, with a "vs" badge between them.

• When to use: "difference between X and Y", "X vs Y", "compare A and B"
• Structure: Left card (blue theme) + VS badge (pink) + Right card (purple theme)
• Each card has: title, description, flow nodes with animated arrows, trait bullets
• Bottom section: comparison table with animated horizontal arrows in headers

2. Process / Interaction Flow

Vertical or horizontal sequence of steps connected by animated arrows.

• When to use: "how does X work", "explain the process", "show the flow", "steps of"
• Structure: Sequential nodes connected by animated down-arrows (or right-arrows for horizontal)
• Highlight first and last nodes with glow effects to mark start/end
• Add feedback loops where the process is iterative

3. Timeline

Horizontal progression showing events or phases over time.

• When to use: "timeline of", "evolution of", "history of", "phases of"
• Structure: Horizontal line with milestone nodes above/below (alternating), animated dots traveling the line
• Date/phase labels below each node

4. Cycle / Loop Diagram

Circular arrangement of steps that repeat continuously.

• When to use: "lifecycle", "cycle of", "continuous process", "loop"
• Structure: Nodes arranged in a circle/oval, connected by curved animated arrows
• A traveling dot circles the entire path

5. Architecture / System Diagram

Layered blocks showing components and their relationships.

• When to use: "architecture of", "system design", "how components connect", "stack"
• Structure: Grouped rectangular blocks in layers, with animated arrows showing data/control flow between them

6. Mind Map / Hierarchy

Central concept branching out to sub-concepts.

• When to use: "mind map", "break down", "categories of", "taxonomy"
• Structure: Central node with radiating branches, each branch a different color, animated pulses flowing outward from center

Core Visual Rules

These rules apply to ALL diagram types:

Color System

• Background: Dark gradient (#0a0e27 → #0f1535)
• Primary pair: Blue (#60a5fa / #93c5fd) and Purple (#a78bfa / #c4b5fd)
• Accent: Pink (#f472b6) for highlights, badges, special markers
• Text: Primary #cbd5e1, secondary #94a3b8, on-dark backgrounds
• Surfaces: rgba(255,255,255,0.04) cards with rgba(255,255,255,0.08) borders
• When more than 2 color groups are needed, extend with: green (#34d399), amber (#fbbf24), rose (#fb7185)

Typography

• Font: Segoe UI, system-ui, sans-serif
• Title: 28px bold, use gradient fill via <linearGradient>
• Card titles: 19px bold, colored by theme
• Node text: 12px semibold
• Body/description: 11.5px regular
• Trait/detail text: 11px

Animated Arrows (The Signature Element)

Every connection between nodes uses animated flowing dots. This is what makes the diagrams distinctive. See references/patterns.md for the exact code, but the core idea:

1. A subtle static line (low-opacity stroke) forms the path
2. An arrowhead polygon sits at the destination end
3. A small circle (r=3) with the theme color animates along the path using CSS @keyframes
4. Stagger animation delays (0s, 0.15s, 0.3s...) so arrows don't all pulse in sync

Glow Effects

• Use <feDropShadow> filters for key nodes (first/last in a flow, important highlights)
• Keep glow subtle — stdDeviation="6", flood-opacity="0.3"
• Don't glow everything — selective glow creates hierarchy

Cards and Containers

• Rounded rectangles (rx="18") with semi-transparent fill
• Colored top border (3px) to identify theme
• Generous padding (28px conceptually)

Responsive SVG

• Always use a viewBox (e.g., viewBox="0 0 1100 920") so the SVG scales
• No fixed width/height on the root <svg> — let it fill its container
• Keep important content away from edges (40px margin minimum)

Construction Process

1. Plan layout on paper — decide node count, connections, approximate positions
2. Set up the SVG skeleton — <svg>, <defs> (gradients, filters), <style> (animations)
3. Draw background — full-size rect with gradient fill
4. Add title section — gradient-filled title text + subtitle
5. Build containers — cards, sections, groupings
6. Place nodes — rounded rects with text centered inside
7. Connect with animated arrows — line + arrowhead + animated dot for each connection
8. Add details — trait lists, descriptions, labels
9. Add special elements — feedback loops, badges, tables as needed
10. Review spacing — ensure nothing overlaps, text is readable, animations are smooth

Internationalization

The diagrams should work in any language. When translating:

• Node widths may need to expand for longer text
• Keep the same visual structure and animations
• Only change text content, not visual design

Output

• Save as a single .svg file
• All CSS animations must be embedded in a <style> block inside the SVG
• No external dependencies — the SVG must be fully self-contained
• File should render correctly when opened directly in a browser

SVG Diagram Patterns Reference

This file contains copy-paste-ready SVG code blocks for building animated diagrams. Mix and match these patterns to construct any diagram type.

Table of Contents

1. SVG Skeleton
2. Defs: Gradients and Filters
3. CSS Animations
4. Background
5. Gradient Title
6. Cards / Containers
7. Flow Nodes
8. Animated Vertical Arrow
9. Animated Horizontal Arrow
10. Animated Curved / Path Arrow
11. Feedback Loop
12. VS Badge
13. Comparison Table
14. Trait / Bullet List
15. Example Tags Row
16. Color Palette Reference
17. Layout Templates

---

SVG Skeleton

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 920"
     font-family="Segoe UI, system-ui, sans-serif">
  <defs>
    <!-- gradients and filters here -->
  </defs>
  <style>
    /* CSS animations here */
  </style>

  <!-- Background -->
  <rect width="1100" height="920" fill="url(#bgGrad)" rx="0"/>

  <!-- Content goes here -->
</svg>

Adjust the viewBox dimensions to fit your content. Common sizes:

• Comparison: 1100 x 920
• Process flow (vertical): 600 x 900
• Process flow (horizontal): 1200 x 500
• Timeline: 1200 x 450
• Mind map: 1000 x 800

---

Defs: Gradients and Filters

<defs>
  <!-- Background gradient -->
  <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%" stop-color="#0a0e27"/>
    <stop offset="100%" stop-color="#0f1535"/>
  </linearGradient>

  <!-- Title gradient (blue → purple → pink) -->
  <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#60a5fa"/>
    <stop offset="50%" stop-color="#a78bfa"/>
    <stop offset="100%" stop-color="#f472b6"/>
  </linearGradient>

  <!-- Glow filters -->
  <filter id="glowBlue">
    <feDropShadow dx="0" dy="0" stdDeviation="6"
                  flood-color="#60a5fa" flood-opacity="0.3"/>
  </filter>
  <filter id="glowPurple">
    <feDropShadow dx="0" dy="0" stdDeviation="6"
                  flood-color="#a78bfa" flood-opacity="0.3"/>
  </filter>
  <filter id="glowPink">
    <feDropShadow dx="0" dy="0" stdDeviation="8"
                  flood-color="#f472b6" flood-opacity="0.25"/>
  </filter>
  <filter id="glowGreen">
    <feDropShadow dx="0" dy="0" stdDeviation="6"
                  flood-color="#34d399" flood-opacity="0.3"/>
  </filter>
  <filter id="glowAmber">
    <feDropShadow dx="0" dy="0" stdDeviation="6"
                  flood-color="#fbbf24" flood-opacity="0.3"/>
  </filter>
</defs>

---

CSS Animations

/* Vertical arrow: dot flows downward */
@keyframes flowDown {
  0%   { transform: translateY(-36px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}

/* Horizontal arrow: dot flows rightward */
@keyframes flowRight {
  0%   { transform: translateX(-24px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(24px); opacity: 0; }
}

/* Horizontal arrow: dot flows leftward */
@keyframes flowLeft {
  0%   { transform: translateX(24px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(-24px); opacity: 0; }
}

/* Upward arrow */
@keyframes flowUp {
  0%   { transform: translateY(36px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-36px); opacity: 0; }
}

/* Pulsing glow (for badges, key nodes) */
@keyframes pulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.06; }
}

/* Dot traveling along an SVG path (for loops/curves) */
@keyframes loopTravel {
  0%   { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Stagger classes — apply to animated dots */
.ad1 { animation-delay: 0s; }
.ad2 { animation-delay: 0.15s; }
.ad3 { animation-delay: 0.3s; }
.ad4 { animation-delay: 0.45s; }
.ad5 { animation-delay: 0.6s; }
.ad6 { animation-delay: 0.75s; }

---

Background

<rect width="1100" height="920" fill="url(#bgGrad)" rx="0"/>

---

Gradient Title

<text x="550" y="46" text-anchor="middle"
      font-size="28" font-weight="700"
      fill="url(#titleGrad)">Your Diagram Title</text>
<text x="550" y="70" text-anchor="middle"
      font-size="13" fill="#94a3b8">A helpful subtitle</text>

---

Cards / Containers

A card is a rounded rectangle with a colored top accent bar:

<!-- Card background -->
<rect x="40" y="95" width="440" height="490" rx="18"
      fill="rgba(255,255,255,0.04)"
      stroke="rgba(96,165,250,0.35)" stroke-width="1"/>
<!-- Colored top bar -->
<rect x="40" y="95" width="440" height="3" rx="1" fill="#60a5fa"/>

<!-- Card title -->
<text x="68" y="132" font-size="19" font-weight="700"
      fill="#60a5fa">Card Title</text>
<!-- Card description -->
<text x="68" y="153" font-size="11.5" fill="#94a3b8">
  Description text goes here on one or more lines.
</text>

For purple-themed cards, swap colors:

• Border stroke: rgba(167,139,250,0.35)
• Top bar fill: #a78bfa
• Title fill: #a78bfa

---

Flow Nodes

Regular node

<rect x="155" y="276" width="210" height="36" rx="10"
      fill="rgba(96,165,250,0.1)"
      stroke="rgba(96,165,250,0.25)" stroke-width="1"/>
<text x="260" y="299" text-anchor="middle"
      font-size="12" font-weight="600" fill="#93c5fd">Node Label</text>

Highlighted node (with glow — use for start/end nodes)

<rect x="155" y="200" width="210" height="36" rx="10"
      fill="rgba(96,165,250,0.18)"
      stroke="rgba(96,165,250,0.5)" stroke-width="1"
      filter="url(#glowBlue)"/>
<text x="260" y="223" text-anchor="middle"
      font-size="12" font-weight="600" fill="#93c5fd">Start Node</text>

Purple variant (regular)

<rect x="725" y="266" width="210" height="36" rx="10"
      fill="rgba(167,139,250,0.1)"
      stroke="rgba(167,139,250,0.25)" stroke-width="1"/>
<text x="830" y="289" text-anchor="middle"
      font-size="12" font-weight="600" fill="#c4b5fd">Node Label</text>

Purple variant (highlighted)

<rect x="725" y="200" width="210" height="36" rx="10"
      fill="rgba(167,139,250,0.18)"
      stroke="rgba(167,139,250,0.5)" stroke-width="1"
      filter="url(#glowPurple)"/>
<text x="830" y="223" text-anchor="middle"
      font-size="12" font-weight="600" fill="#c4b5fd">Start Node</text>

---

Animated Vertical Arrow

Connects two vertically stacked nodes. Place between them.

<!-- Static line -->
<line x1="260" y1="236" x2="260" y2="272"
      stroke="rgba(96,165,250,0.18)" stroke-width="2"/>
<!-- Arrowhead -->
<polygon points="260,274 255,266 265,266" fill="#60a5fa" opacity="0.7"/>
<!-- Animated dot -->
<circle cx="260" cy="254" r="3" fill="#60a5fa"
        class="arrow-dot-blue ad1"
        style="animation: flowDown 1.1s ease-in-out infinite;"/>

Key measurements:

• y1 = bottom of source node (node y + node height)
• y2 = top of target node (next node y)
• cy of dot = midpoint of y1 and y2
• Arrowhead points sit at y2+2, fanning 5px left and right

For purple arrows, swap #60a5fa → #a78bfa.

---

Animated Horizontal Arrow

<line x1="395" y1="656" x2="425" y2="656"
      stroke="rgba(96,165,250,0.2)" stroke-width="2"/>
<polygon points="427,656 421,652 421,660" fill="#60a5fa"/>
<circle cx="410" cy="656" r="2.5" fill="#60a5fa"
        style="animation: flowRight 1s ease-in-out infinite;"/>

---

Animated Curved / Path Arrow

For non-straight connections, use an SVG path with offset-path animation:

<!-- The visible curved path -->
<path d="M200,300 C250,250 350,250 400,300"
      fill="none" stroke="rgba(96,165,250,0.25)"
      stroke-width="2" stroke-dasharray="4 4"/>

<!-- Arrowhead at the end -->
<polygon points="400,300 394,294 394,306" fill="#60a5fa" opacity="0.5"/>

<!-- Animated dot traveling the path -->
<circle r="4" fill="#60a5fa"
        style="offset-path: path('M200,300 C250,250 350,250 400,300');
               animation: loopTravel 2.6s linear infinite;">
  <animate attributeName="opacity"
           values="0;1;1;0" dur="2.6s" repeatCount="indefinite"/>
</circle>

---

Feedback Loop

A dashed curved arrow on the side of a flow, showing iteration:

<!-- Dashed curve -->
<path d="M940,220 C975,220 980,240 980,270 L980,420 C980,450 975,470 940,470"
      fill="none" stroke="rgba(167,139,250,0.25)"
      stroke-width="2" stroke-dasharray="4 4"/>
<!-- Arrowhead -->
<polygon points="940,470 948,464 948,476" fill="#a78bfa" opacity="0.5"/>
<!-- Label (rotated for vertical placement) -->
<text x="992" y="348" font-size="9" fill="#a78bfa" opacity="0.6"
      transform="rotate(90,992,348)">feedback loop</text>
<!-- Traveling dot -->
<circle r="4" fill="#a78bfa"
        style="offset-path: path('M940,220 C975,220 980,240 980,270 L980,420 C980,450 975,470 940,470');
               animation: loopTravel 2.6s linear infinite;">
  <animate attributeName="opacity"
           values="0;1;1;0" dur="2.6s" repeatCount="indefinite"/>
</circle>

---

VS Badge

Pulsing circle badge for comparison diagrams:

<circle cx="550" cy="340" r="28"
        fill="rgba(244,114,182,0.12)"
        stroke="rgba(244,114,182,0.4)" stroke-width="2"
        filter="url(#glowPink)"/>
<!-- Pulsing outer ring -->
<circle cx="550" cy="340" r="28"
        fill="none" stroke="rgba(244,114,182,0.18)" stroke-width="1"
        style="animation: pulse 2.5s ease-in-out infinite;"/>
<text x="550" y="346" text-anchor="middle"
      font-size="16" font-weight="800" fill="#f472b6">vs</text>

---

Comparison Table

<!-- Header row -->
<rect x="80" y="640" width="200" height="32" fill="rgba(255,255,255,0.06)"/>
<rect x="280" y="640" width="370" height="32" fill="rgba(96,165,250,0.1)"/>
<rect x="650" y="640" width="370" height="32" fill="rgba(167,139,250,0.1)"/>
<text x="180" y="661" text-anchor="middle"
      font-size="11.5" font-weight="700" fill="#94a3b8">Dimension</text>
<text x="465" y="661" text-anchor="middle"
      font-size="11.5" font-weight="700" fill="#60a5fa">Column A</text>
<text x="835" y="661" text-anchor="middle"
      font-size="11.5" font-weight="700" fill="#a78bfa">Column B</text>

<!-- Data row (alternate between transparent and rgba fill) -->
<rect x="80" y="672" width="940" height="30" fill="rgba(255,255,255,0.02)"/>
<text x="95" y="691" fill="#94a3b8" font-weight="600">Row Label</text>
<text x="295" y="691" fill="#cbd5e1">Value A</text>
<text x="665" y="691" fill="#cbd5e1">Value B</text>

---

Trait / Bullet List

Numbered circle icons with descriptive text:

<g font-size="11" fill="#cbd5e1">
  <circle cx="76" cy="494" r="8" fill="rgba(96,165,250,0.15)"/>
  <text x="76" y="497.5" text-anchor="middle"
        font-size="8.5" font-weight="700" fill="#60a5fa">1</text>
  <text x="92" y="498">Trait description goes here</text>

  <circle cx="76" cy="518" r="8" fill="rgba(96,165,250,0.15)"/>
  <text x="76" y="521.5" text-anchor="middle"
        font-size="8.5" font-weight="700" fill="#60a5fa">2</text>
  <text x="92" y="522">Another trait description</text>
</g>

Spacing: 24px between each trait (cy increments of 24).

---

Example Tags Row

<g font-size="10.5">
  <text x="260" y="885" text-anchor="middle"
        font-weight="700" fill="#60a5fa" font-size="12">Examples</text>
  <text x="260" y="905" text-anchor="middle" fill="#93c5fd">
    Item A  ·  Item B  ·  Item C  ·  Item D
  </text>
</g>

---

Color Palette Reference

Role	Primary	Light	Surface (12% opacity)	Border (25-35%)
Blue	#60a5fa	#93c5fd	rgba(96,165,250,0.12)	rgba(96,165,250,0.35)
Purple	#a78bfa	#c4b5fd	rgba(167,139,250,0.12)	rgba(167,139,250,0.35)
Pink	#f472b6	#f9a8d4	rgba(244,114,182,0.12)	rgba(244,114,182,0.35)
Green	#34d399	#6ee7b7	rgba(52,211,153,0.12)	rgba(52,211,153,0.35)
Amber	#fbbf24	#fde68a	rgba(251,191,36,0.12)	rgba(251,191,36,0.35)
Rose	#fb7185	#fda4af	rgba(251,113,133,0.12)	rgba(251,113,133,0.35)

Background & Text

Role	Color
Background dark	#0a0e27
Background light	#0f1535
Card surface	rgba(255,255,255,0.04)
Card border	rgba(255,255,255,0.08)
Primary text	#cbd5e1
Secondary text	#94a3b8
Table stripe	rgba(255,255,255,0.02)

---

Layout Templates

Comparison (two-column)

[  Left Card (40,95)  ]  [VS]  [  Right Card (620,95)  ]
          440px         52px badge         440px
                    [ Comparison Table (80, 640) ]
                    [    Examples Row (885)      ]

Vertical Process Flow

         [ Title (center, y=46) ]
         [  Node 1 (highlight)  ]
              ↓ animated
         [      Node 2          ]
              ↓ animated
         [      Node 3          ]
              ↓ animated
         [  Node N (highlight)  ]

Horizontal Timeline

  [ Title ]
  ●────────●────────●────────●────────●
  |        |        |        |        |
Phase 1  Phase 2  Phase 3  Phase 4  Phase 5
  animated dots travel left → right along the line

Cycle

        [ Node 1 ]
       ↗           ↘
  [ Node 4 ]    [ Node 2 ]
       ↖           ↙
        [ Node 3 ]
  curved animated arrows connect in a circle