Timeline Creator

Name: Timeline Creator
Author: mhattingpete

mhattingpete/claude-skills-marketplace

285 installs
656 repo stars
Updated July 25, 2026
mhattingpete/claude-skills-marketplace

Helps with ai & agent building tasks.

About

timeline-creator is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

timeline-creator
AI & Agent Building
AI-coding skill

Timeline Creator by the numbers

285 all-time installs (skills.sh)
+6 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #2,318 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill timeline-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/mhattingpete/claude-skills-marketplace/timeline-creator.svg)](https://skillselion.com/skills/mhattingpete/claude-skills-marketplace/timeline-creator)

Installs	285
repo stars	★ 656
Last updated	July 25, 2026
Repository	mhattingpete/claude-skills-marketplace ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

Timeline Creator

Create interactive HTML timelines and project roadmaps with Gantt charts and milestones.

When to Use

"Create timeline for [project]"
"Generate roadmap for Q1-Q4"
"Make Gantt chart for schedule"
"Show project milestones"

Components

1. Timeline Header: project name, date range, completion % 2. Phase Groups: Q1, Q2, Q3, Q4 or custom phases 3. Timeline Items: tasks with start/end dates, progress, status 4. Milestones: key deliverables with dates 5. Gantt Visualization: horizontal bars showing duration

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>[Project] Timeline</title>
  <style>
    body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
    .timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
    .milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
    /* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
  </style>
</head>
<body>
  <h1>[Project] Timeline</h1>
  <!-- Phase sections with timeline bars -->
  <!-- Milestones list -->
</body>
</html>

Timeline Bar Pattern

<div class="timeline-item">
  <span>Task Name</span>
  <div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
  <span>[start] - [end]</span>
</div>

Workflow

1. Extract tasks, dates, phases from project 2. Calculate duration percentages 3. Group by phases (quarters or custom) 4. Create HTML with Gantt-style bars 5. Add milestones section 6. Write to [project]-timeline.html

Use semantic colors for status, keep layout responsive.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[DOCUMENT_TITLE]</title>
    <style>
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px 20px;
            min-height: 100vh;
        }

        /* ===== CONTAINER ===== */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
        }

        /* ===== TYPOGRAPHY ===== */
        h1 {
            text-align: center;
            color: #2d3748;
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            text-align: center;
            color: #718096;
            font-size: 1.1em;
            margin-bottom: 40px;
        }

        h2.section-title {
            font-size: 1.8em;
            color: #2d3748;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #667eea;
        }

        h3 {
            font-size: 1.4em;
            color: #2d3748;
            margin-bottom: 15px;
        }

        /* ===== LAYOUT SECTIONS ===== */
        .section {
            margin-bottom: 60px;
        }

        .diagram-container {
            background: #f7fafc;
            border-radius: 15px;
            padding: 30px;
            margin: 20px 0;
            border: 2px solid #e2e8f0;
        }

        /* ===== METRIC CARDS ===== */
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .metric-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .metric-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        /* ===== CODE BLOCKS ===== */
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            margin: 20px 0;
            line-height: 1.6;
        }

        .highlight {
            color: #fbbf24;
            font-weight: bold;
        }

        /* ===== EXAMPLE BOXES ===== */
        .example-box {
            background: #fff;
            border: 2px solid #667eea;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }

        .example-title {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        /* ===== LEGEND ===== */
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
            padding: 20px;
            background: #edf2f7;
            border-radius: 10px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .legend-box {
            width: 30px;
            height: 30px;
            border-radius: 5px;
            border: 2px solid #2d3748;
        }

        /* ===== SVG STYLING ===== */
        svg {
            width: 100%;
            height: auto;
        }

        svg text {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* ===== FOOTER ===== */
        .footer {
            text-align: center;
            margin-top: 60px;
            padding: 30px;
            background: #f7fafc;
            border-radius: 10px;
        }

        .footer p {
            margin: 10px 0;
        }

        .footer-main {
            font-size: 1.1em;
            color: #4a5568;
            font-weight: 500;
        }

        .footer-sub {
            font-size: 0.95em;
            color: #718096;
        }

        .footer-meta {
            font-size: 0.85em;
            color: #a0aec0;
            margin-top: 15px;
        }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            .section-title {
                font-size: 1.4em;
            }

            .metric-grid {
                grid-template-columns: 1fr;
            }

            .metric-value {
                font-size: 2em;
            }

            .legend {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* ===== UTILITY CLASSES ===== */
        .text-center { text-align: center; }
        .mt-20 { margin-top: 20px; }
        .mb-20 { margin-bottom: 20px; }
        .p-20 { padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>[DOCUMENT_TITLE]</h1>
        <p class="subtitle">[DOCUMENT_SUBTITLE]</p>

        <!-- METRIC CARDS SECTION (Optional) -->
        <div class="metric-grid">
            <div class="metric-card">
                <div class="metric-value">[VALUE_1]</div>
                <div class="metric-label">[LABEL_1]</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">[VALUE_2]</div>
                <div class="metric-label">[LABEL_2]</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">[VALUE_3]</div>
                <div class="metric-label">[LABEL_3]</div>
            </div>
        </div>

        <!-- MAIN CONTENT SECTIONS -->
        <div class="section">
            <h2 class="section-title">1. [SECTION_TITLE]</h2>

            <div class="diagram-container">
                <!-- SVG diagrams go here -->
                <svg viewBox="0 0 1200 600">
                    <!-- SVG content -->
                </svg>
            </div>

            <div class="example-box">
                <div class="example-title">[EXAMPLE_TITLE]</div>
                <p>[EXAMPLE_CONTENT]</p>
            </div>

            <div class="code-block">
<span class="highlight">[HIGHLIGHTED_TERM]:</span> [CODE_CONTENT]
            </div>
        </div>

        <!-- LEGEND SECTION (Optional) -->
        <div class="legend">
            <div class="legend-item">
                <div class="legend-box" style="background: #4299e1;"></div>
                <span>[LEGEND_ITEM_1]</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #48bb78;"></div>
                <span>[LEGEND_ITEM_2]</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #f59e0b;"></div>
                <span>[LEGEND_ITEM_3]</span>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
            <p class="footer-main"><strong>[FOOTER_MAIN_TEXT]</strong></p>
            <p class="footer-sub">[FOOTER_SUB_TEXT]</p>
            <p class="footer-meta">[FOOTER_META_TEXT]</p>
        </div>
    </div>
</body>
</html>

<!-- TIMELINE COMPONENTS LIBRARY -->
<!-- Copy and customize these patterns for project timelines and roadmaps -->

<!-- ===== HORIZONTAL TIMELINE ===== -->

<svg viewBox="0 0 1200 400" style="width: 100%; height: auto;">
    <text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
        Project Timeline
    </text>

    <!-- Main timeline bar -->
    <rect x="100" y="180" width="1000" height="20" rx="10" fill="#e2e8f0"/>
    <rect x="100" y="180" width="600" height="20" rx="10" fill="#4299e1"/>

    <!-- Current date indicator -->
    <line x1="700" y1="150" x2="700" y2="230" stroke="#f56565" stroke-width="3" stroke-dasharray="5,5"/>
    <text x="700" y="140" text-anchor="middle" font-size="12" fill="#f56565" font-weight="bold">
        TODAY
    </text>

    <!-- Milestone 1 -->
    <circle cx="200" cy="190" r="15" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
    <text x="200" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
        Q1
    </text>
    <text x="200" y="270" text-anchor="middle" font-size="12" fill="#718096">
        Planning
    </text>
    <text x="200" y="120" text-anchor="middle" font-size="11" fill="#48bb78" font-weight="bold">
        ✓ Complete
    </text>

    <!-- Milestone 2 -->
    <circle cx="400" cy="190" r="15" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
    <text x="400" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
        Q2
    </text>
    <text x="400" y="270" text-anchor="middle" font-size="12" fill="#718096">
        Development
    </text>
    <text x="400" y="120" text-anchor="middle" font-size="11" fill="#48bb78" font-weight="bold">
        ✓ Complete
    </text>

    <!-- Milestone 3 (in progress) -->
    <circle cx="600" cy="190" r="15" fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
    <text x="600" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
        Q3
    </text>
    <text x="600" y="270" text-anchor="middle" font-size="12" fill="#718096">
        Testing
    </text>
    <text x="600" y="120" text-anchor="middle" font-size="11" fill="#f59e0b" font-weight="bold">
        ⟳ In Progress
    </text>

    <!-- Milestone 4 (pending) -->
    <circle cx="800" cy="190" r="15" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
    <text x="800" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
        Q4
    </text>
    <text x="800" y="270" text-anchor="middle" font-size="12" fill="#718096">
        Deployment
    </text>
    <text x="800" y="120" text-anchor="middle" font-size="11" fill="#718096">
        Pending
    </text>

    <!-- Milestone 5 (pending) -->
    <circle cx="1000" cy="190" r="15" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
    <text x="1000" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
        Q1 '26
    </text>
    <text x="1000" y="270" text-anchor="middle" font-size="12" fill="#718096">
        Maintenance
    </text>
    <text x="1000" y="120" text-anchor="middle" font-size="11" fill="#718096">
        Pending
    </text>
</svg>

<!-- ===== VERTICAL TIMELINE ===== -->

<svg viewBox="0 0 800 1000" style="width: 100%; height: auto;">
    <text x="400" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
        Development Roadmap
    </text>

    <!-- Vertical timeline line -->
    <line x1="100" y1="80" x2="100" y2="950" stroke="#e2e8f0" stroke-width="4"/>

    <!-- Event 1 (completed) -->
    <circle cx="100" cy="120" r="12" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
    <rect x="140" y="80" width="600" height="80" rx="10" fill="#e6f4ea" stroke="#48bb78" stroke-width="2"/>
    <text x="160" y="105" font-size="14" fill="#2d3748" font-weight="bold">
        Phase 1: Requirements Gathering
    </text>
    <text x="160" y="130" font-size="12" fill="#718096">
        January 2025 • Duration: 2 weeks
    </text>
    <text x="160" y="150" font-size="11" fill="#48bb78" font-weight="bold">
        ✓ Completed
    </text>

    <!-- Event 2 (completed) -->
    <circle cx="100" cy="250" r="12" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
    <rect x="140" y="210" width="600" height="80" rx="10" fill="#e6f4ea" stroke="#48bb78" stroke-width="2"/>
    <text x="160" y="235" font-size="14" fill="#2d3748" font-weight="bold">
        Phase 2: Design & Architecture
    </text>
    <text x="160" y="260" font-size="12" fill="#718096">
        February 2025 • Duration: 3 weeks
    </text>
    <text x="160" y="280" font-size="11" fill="#48bb78" font-weight="bold">
        ✓ Completed
    </text>

    <!-- Event 3 (in progress) -->
    <circle cx="100" cy="400" r="12" fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
    <rect x="140" y="360" width="600" height="80" rx="10" fill="#fffbeb" stroke="#f59e0b" stroke-width="2"/>
    <text x="160" y="385" font-size="14" fill="#2d3748" font-weight="bold">
        Phase 3: Development Sprint 1
    </text>
    <text x="160" y="410" font-size="12" fill="#718096">
        March 2025 • Duration: 4 weeks
    </text>
    <text x="160" y="430" font-size="11" fill="#f59e0b" font-weight="bold">
        ⟳ In Progress (60% complete)
    </text>

    <!-- Event 4 (pending) -->
    <circle cx="100" cy="550" r="12" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
    <rect x="140" y="510" width="600" height="80" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
    <text x="160" y="535" font-size="14" fill="#2d3748" font-weight="bold">
        Phase 4: Development Sprint 2
    </text>
    <text x="160" y="560" font-size="12" fill="#718096">
        April 2025 • Duration: 4 weeks
    </text>
    <text x="160" y="580" font-size="11" fill="#718096">
        Pending
    </text>

    <!-- Event 5 (pending) -->
    <circle cx="100" cy="700" r="12" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
    <rect x="140" y="660" width="600" height="80" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
    <text x="160" y="685" font-size="14" fill="#2d3748" font-weight="bold">
        Phase 5: Testing & QA
    </text>
    <text x="160" y="710" font-size="12" fill="#718096">
        May 2025 • Duration: 2 weeks
    </text>
    <text x="160" y="730" font-size="11" fill="#718096">
        Pending
    </text>

    <!-- Event 6 (pending) -->
    <circle cx="100" cy="850" r="12" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
    <rect x="140" y="810" width="600" height="80" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
    <text x="160" y="835" font-size="14" fill="#2d3748" font-weight="bold">
        Phase 6: Production Deployment
    </text>
    <text x="160" y="860" font-size="12" fill="#718096">
        June 2025 • Duration: 1 week
    </text>
    <text x="160" y="880" font-size="11" fill="#718096">
        Pending
    </text>
</svg>

<!-- ===== GANTT CHART STYLE ===== -->

<svg viewBox="0 0 1200 600" style="width: 100%; height: auto;">
    <text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
        Project Gantt Chart
    </text>

    <!-- Header row -->
    <rect x="50" y="60" width="250" height="40" fill="#667eea"/>
    <text x="175" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
        Task Name
    </text>

    <!-- Month headers -->
    <rect x="300" y="60" width="200" height="40" fill="#764ba2"/>
    <text x="400" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
        Jan
    </text>

    <rect x="500" y="60" width="200" height="40" fill="#764ba2"/>
    <text x="600" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
        Feb
    </text>

    <rect x="700" y="60" width="200" height="40" fill="#764ba2"/>
    <text x="800" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
        Mar
    </text>

    <rect x="900" y="60" width="200" height="40" fill="#764ba2"/>
    <text x="1000" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
        Apr
    </text>

    <!-- Task 1 -->
    <rect x="50" y="100" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
    <text x="70" y="135" font-size="13" fill="#2d3748" font-weight="500">
        Requirements Analysis
    </text>

    <rect x="300" y="100" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
    <rect x="310" y="115" width="180" height="30" rx="5" fill="#48bb78"/>
    <text x="400" y="135" text-anchor="middle" fill="white" font-size="11" font-weight="bold">
        ✓ Complete
    </text>

    <!-- Task 2 -->
    <rect x="50" y="160" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
    <text x="70" y="195" font-size="13" fill="#2d3748" font-weight="500">
        Design Phase
    </text>

    <rect x="300" y="160" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
    <rect x="360" y="175" width="280" height="30" rx="5" fill="#48bb78"/>
    <text x="500" y="195" text-anchor="middle" fill="white" font-size="11" font-weight="bold">
        ✓ Complete
    </text>

    <!-- Task 3 (in progress) -->
    <rect x="50" y="220" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
    <text x="70" y="255" font-size="13" fill="#2d3748" font-weight="500">
        Development Sprint 1
    </text>

    <rect x="300" y="220" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
    <rect x="510" y="235" width="380" height="30" rx="5" fill="#f59e0b"/>
    <text x="700" y="255" text-anchor="middle" fill="white" font-size="11" font-weight="bold">
        ⟳ In Progress (65%)
    </text>

    <!-- Task 4 (pending) -->
    <rect x="50" y="280" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
    <text x="70" y="315" font-size="13" fill="#2d3748" font-weight="500">
        Development Sprint 2
    </text>

    <rect x="300" y="280" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
    <rect x="710" y="295" width="280" height="30" rx="5" fill="#cbd5e0"/>
    <text x="850" y="315" text-anchor="middle" fill="#718096" font-size="11" font-weight="bold">
        Pending
    </text>

    <!-- Task 5 (pending) -->
    <rect x="50" y="340" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
    <text x="70" y="375" font-size="13" fill="#2d3748" font-weight="500">
        Testing
    </text>

    <rect x="300" y="340" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
    <rect x="910" y="355" width="180" height="30" rx="5" fill="#cbd5e0"/>
    <text x="1000" y="375" text-anchor="middle" fill="#718096" font-size="11" font-weight="bold">
        Pending
    </text>

    <!-- Dependency arrows -->
    <defs>
        <marker id="dep-arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
            <polygon points="0 0, 8 3, 0 6" fill="#9f7aea"/>
        </marker>
    </defs>
    <path d="M 400 160 L 400 175" stroke="#9f7aea" stroke-width="2"
          marker-end="url(#dep-arrow)" stroke-dasharray="4,2"/>
    <path d="M 640 220 L 640 235" stroke="#9f7aea" stroke-width="2"
          marker-end="url(#dep-arrow)" stroke-dasharray="4,2"/>
</svg>

<!-- ===== MILESTONE ROADMAP ===== -->

<svg viewBox="0 0 1200 500" style="width: 100%; height: auto;">
    <text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
        Product Roadmap 2025
    </text>

    <!-- Quarter 1 -->
    <g>
        <rect x="50" y="80" width="260" height="150" rx="15" fill="#e6f4ea" stroke="#48bb78" stroke-width="3"/>
        <text x="180" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
            Q1 2025
        </text>
        <text x="180" y="135" text-anchor="middle" font-size="12" fill="#48bb78" font-weight="bold">
            ✓ COMPLETED
        </text>
        <text x="70" y="160" font-size="11" fill="#2d3748">
            • User authentication
        </text>
        <text x="70" y="180" font-size="11" fill="#2d3748">
            • Basic dashboard
        </text>
        <text x="70" y="200" font-size="11" fill="#2d3748">
            • API v1.0
        </text>
        <text x="70" y="220" font-size="11" fill="#2d3748">
            • Mobile responsive
        </text>
    </g>

    <!-- Quarter 2 -->
    <g>
        <rect x="340" y="80" width="260" height="150" rx="15" fill="#fffbeb" stroke="#f59e0b" stroke-width="3"/>
        <text x="470" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
            Q2 2025
        </text>
        <text x="470" y="135" text-anchor="middle" font-size="12" fill="#f59e0b" font-weight="bold">
            ⟳ IN PROGRESS
        </text>
        <text x="360" y="160" font-size="11" fill="#2d3748">
            • Advanced analytics
        </text>
        <text x="360" y="180" font-size="11" fill="#2d3748">
            • Team collaboration
        </text>
        <text x="360" y="200" font-size="11" fill="#2d3748">
            • Export features
        </text>
        <text x="360" y="220" font-size="11" fill="#2d3748">
            • Integration hooks
        </text>
    </g>

    <!-- Quarter 3 -->
    <g>
        <rect x="630" y="80" width="260" height="150" rx="15" fill="#f7fafc" stroke="#cbd5e0" stroke-width="3"/>
        <text x="760" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
            Q3 2025
        </text>
        <text x="760" y="135" text-anchor="middle" font-size="12" fill="#718096" font-weight="bold">
            PLANNED
        </text>
        <text x="650" y="160" font-size="11" fill="#2d3748">
            • AI-powered insights
        </text>
        <text x="650" y="180" font-size="11" fill="#2d3748">
            • Custom workflows
        </text>
        <text x="650" y="200" font-size="11" fill="#2d3748">
            • White-label options
        </text>
        <text x="650" y="220" font-size="11" fill="#2d3748">
            • API v2.0
        </text>
    </g>

    <!-- Quarter 4 -->
    <g>
        <rect x="920" y="80" width="260" height="150" rx="15" fill="#f7fafc" stroke="#cbd5e0" stroke-width="3"/>
        <text x="1050" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
            Q4 2025
        </text>
        <text x="1050" y="135" text-anchor="middle" font-size="12" fill="#718096" font-weight="bold">
            PLANNED
        </text>
        <text x="940" y="160" font-size="11" fill="#2d3748">
            • Enterprise features
        </text>
        <text x="940" y="180" font-size="11" fill="#2d3748">
            • Advanced security
        </text>
        <text x="940" y="200" font-size="11" fill="#2d3748">
            • Marketplace launch
        </text>
        <text x="940" y="220" font-size="11" fill="#2d3748">
            • Multi-tenancy
        </text>
    </g>

    <!-- Priority badges -->
    <g>
        <rect x="50" y="270" width="150" height="40" rx="20" fill="#f56565"/>
        <text x="125" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
            🔥 Critical
        </text>
    </g>

    <g>
        <rect x="220" y="270" width="150" height="40" rx="20" fill="#f59e0b"/>
        <text x="295" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
            ⚡ High
        </text>
    </g>

    <g>
        <rect x="390" y="270" width="150" height="40" rx="20" fill="#4299e1"/>
        <text x="465" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
            ✓ Medium
        </text>
    </g>

    <g>
        <rect x="560" y="270" width="150" height="40" rx="20" fill="#cbd5e0"/>
        <text x="635" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
            ○ Low
        </text>
    </g>

    <!-- Legend -->
    <text x="50" y="360" font-size="14" fill="#718096" font-style="italic">
        Priority levels indicate urgency and impact on overall product goals
    </text>
</svg>

<!-- ===== SWIMLANE TIMELINE ===== -->

<svg viewBox="0 0 1200 600" style="width: 100%; height: auto;">
    <text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
        Team Timeline View
    </text>

    <!-- Team labels -->
    <text x="40" y="125" text-anchor="end" font-size="14" fill="#2d3748" font-weight="bold">
        Frontend
    </text>
    <text x="40" y="275" text-anchor="end" font-size="14" fill="#2d3748" font-weight="bold">
        Backend
    </text>
    <text x="40" y="425" text-anchor="end" font-size="14" fill="#2d3748" font-weight="bold">
        QA
    </text>

    <!-- Time grid -->
    <line x1="100" y1="60" x2="100" y2="500" stroke="#e2e8f0" stroke-width="1"/>
    <line x1="400" y1="60" x2="400" y2="500" stroke="#e2e8f0" stroke-width="1"/>
    <line x1="700" y1="60" x2="700" y2="500" stroke="#e2e8f0" stroke-width="1"/>
    <line x1="1000" y1="60" x2="1000" y2="500" stroke="#e2e8f0" stroke-width="1"/>

    <!-- Month labels -->
    <text x="250" y="80" text-anchor="middle" font-size="12" fill="#718096">Week 1-2</text>
    <text x="550" y="80" text-anchor="middle" font-size="12" fill="#718096">Week 3-4</text>
    <text x="850" y="80" text-anchor="middle" font-size="12" fill="#718096">Week 5-6</text>

    <!-- Swimlanes -->
    <line x1="60" y1="170" x2="1150" y2="170" stroke="#e2e8f0" stroke-width="2"/>
    <line x1="60" y1="320" x2="1150" y2="320" stroke="#e2e8f0" stroke-width="2"/>
    <line x1="60" y1="470" x2="1150" y2="470" stroke="#e2e8f0" stroke-width="2"/>

    <!-- Frontend tasks -->
    <rect x="110" y="110" width="250" height="40" rx="8" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
    <text x="235" y="135" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
        UI Components
    </text>

    <rect x="420" y="110" width="250" height="40" rx="8" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
    <text x="545" y="135" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
        Integration Testing
    </text>

    <!-- Backend tasks -->
    <rect x="260" y="260" width="300" height="40" rx="8" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
    <text x="410" y="285" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
        API Development
    </text>

    <rect x="720" y="260" width="200" height="40" rx="8" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
    <text x="820" y="285" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
        Deploy & Monitor
    </text>

    <!-- QA tasks -->
    <rect x="470" y="410" width="350" height="40" rx="8" fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
    <text x="645" y="435" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
        End-to-End Testing
    </text>

    <rect x="970" y="410" width="150" height="40" rx="8" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
    <text x="1045" y="435" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
        Sign-off
    </text>
</svg>

Design Patterns Reference

Complete design system guidelines for creating visually stunning HTML documentation.

Color System

Primary Palette

Gradient Background:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Use for: Body background, primary branding elements
Creates depth and visual interest

Accent Colors:

Primary Purple-Blue: #667eea
Secondary Purple: #764ba2
Use for: Headings, borders, key UI elements

Semantic Color Scales

Success / Confirmed / Positive

Base: #48bb78 (green)
Dark: #2f855a (darker green, for strokes)
Light: #e6f4ea (pale green, for backgrounds)
Use for: Completed tasks, success messages, positive metrics

Warning / Uncertain / Attention

Base: #f59e0b (amber)
Dark: #d97706 (darker amber, for strokes)
Light: #fffbeb (pale amber, for backgrounds)
Use for: In-progress items, warnings, items needing attention

Info / Primary / Standard

Base: #4299e1 (blue)
Dark: #2b6cb0 (darker blue, for strokes)
Light: #e6f2ff (pale blue, for backgrounds)
Use for: Standard information, primary actions, neutral states

Error / Critical / Negative

Base: #f56565 (red)
Dark: #c53030 (darker red, for strokes)
Light: #fff5f5 (pale red, for backgrounds)
Use for: Errors, critical issues, failed states

Process / Action / Secondary

Base: #ed8936 (orange)
Dark: #c05621 (darker orange, for strokes)
Light: #fff5e6 (pale orange, for backgrounds)
Use for: Processing states, secondary actions

Special / Highlight / Tertiary

Base: #9f7aea (purple)
Dark: #6b46c1 (darker purple, for strokes)
Light: #f3e6ff (pale purple, for backgrounds)
Use for: Special features, highlights, premium items

Neutral Palette

Text Colors:

Dark (Primary text): #2d3748 - Headings, important content
Medium (Secondary text): #718096 - Body text, labels
Light (Tertiary text): #a0aec0 - Captions, metadata

UI Elements:

Dark border: #cbd5e0
Light border: #e2e8f0
Dark background: #edf2f7
Light background: #f7fafc
White: #ffffff

Color Contrast Guidelines

WCAG AA Compliance:

Minimum contrast ratio: 4.5:1 for normal text
Large text (18pt+ or 14pt+ bold): 3:1 minimum
Safe combinations:
Dark text (#2d3748) on light backgrounds (#f7fafc, #ffffff)
White text on colored backgrounds (all semantic base colors pass)
Medium text (#718096) on white only

Typography

Font Families

Primary (Sans-serif):

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

Use for: All body text, headings, UI elements
Fallback chain ensures availability across platforms

Code (Monospace):

font-family: 'Courier New', monospace;

Use for: Code blocks, technical data, fixed-width content

Type Scale

Display / Hero:

Size: 2.5em (40px at 16px base)
Weight: Bold (700)
Use for: Page title (h1)
Special effect: Gradient text clip

Section Heading:

Size: 1.8em (28.8px)
Weight: Bold (700)
Color: #2d3748
Use for: Major sections (h2)
Decoration: Bottom border 3px solid #667eea

Subsection:

Size: 1.4em (22.4px)
Weight: Bold (700)
Color: #2d3748
Use for: Subsections (h3)

Body:

Size: 1em (16px base)
Weight: Normal (400)
Line height: 1.6
Color: #2d3748 or #4a5568
Use for: Paragraphs, general content

Label / Caption:

Size: 0.9-0.95em (14.4-15.2px)
Weight: Normal (400) or Medium (500)
Color: #718096
Use for: Metric labels, chart labels, form labels

Small / Meta:

Size: 0.85em (13.6px)
Weight: Normal (400)
Color: #a0aec0
Use for: Footnotes, timestamps, metadata

SVG Text:

Small labels: 11-12px
Standard text: 13-14px
Emphasis: 15-16px
Large values: 18-24px
Metric displays: 48px+

Text Effects

Gradient Text (for h1):

h1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Code Highlighting:

.highlight {
    color: #fbbf24;  /* Amber highlight */
    font-weight: bold;
}

Spacing & Layout

Container Sizing

Max Width:

Container: 1400px
Comfortable reading: 800-1000px
Full width sections: No max-width

Padding:

Desktop container: 40px
Mobile container: 20px
Diagram containers: 30px
Content boxes: 20px
Metric cards: 25px

Margins:

Section bottom: 60px
Element groups: 30px
Individual elements: 20px
Small gaps: 10px

Grid Systems

Metric Grid:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;

Automatically responsive
Minimum card width: 200px
Equal width distribution

Custom Grids:

2-column: grid-template-columns: 1fr 1fr;
3-column: grid-template-columns: repeat(3, 1fr);
Sidebar layout: grid-template-columns: 300px 1fr;

Flexbox Patterns

Horizontal Center:

display: flex;
justify-content: center;
align-items: center;

Space Between:

display: flex;
justify-content: space-between;
align-items: center;

Wrapped Row:

display: flex;
flex-wrap: wrap;
gap: 20px;

Visual Effects

Shadows

Card Shadow:

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

Use for: Main container, elevated cards

Metric Card Shadow:

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

Use for: Metric cards, smaller elevation

Subtle Shadow:

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

Use for: Buttons, small cards, hover states

Border Radius

Large (Containers):

Container: 20px
Diagram containers: 15px

Medium (Cards & Boxes):

Metric cards: 15px
Content boxes: 10px
SVG shapes: 10px

Small (UI Elements):

Buttons: 8px
Small badges: 5px

Pills / Rounded:

Full rounded: 50% (circles) or 9999px (pills)
Timeline progress bars: 20px

Opacity

Overlays:

Light overlay: 0.3
Medium overlay: 0.5-0.6
Strong overlay: 0.8-0.9

Hover States:

Slight fade: 0.9
Clear fade: 0.7-0.8

Disabled:

0.5-0.6

Responsive Breakpoints

Mobile First Strategy

Breakpoints:

/* Mobile: default styles, no media query needed */

/* Tablet */
@media (min-width: 768px) { ... }

/* Desktop */
@media (min-width: 1024px) { ... }

/* Large Desktop */
@media (min-width: 1440px) { ... }

Common Pattern (Desktop First):

@media (max-width: 768px) {
    .container { padding: 20px; }
    h1 { font-size: 1.8em; }
    .section-title { font-size: 1.4em; }
    .metric-grid { grid-template-columns: 1fr; }
}

Responsive Typography

Desktop:

h1: 2.5em
h2: 1.8em
h3: 1.4em
body: 1em

Mobile (max-width: 768px):

h1: 1.8em
h2: 1.4em
h3: 1.2em
body: 0.95em

SVG Text Scaling:

Use viewBox for automatic scaling
Font sizes in px remain constant
Increase viewBox dimensions rather than reducing font sizes

Component Patterns

Metric Cards

Standard Pattern:

<div class="metric-card">
    <div class="metric-value">[LARGE NUMBER]</div>
    <div class="metric-label">[DESCRIPTION]</div>
</div>

With Custom Color:

<div class="metric-card" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);">
    <div class="metric-value">✓ [NUMBER]</div>
    <div class="metric-label">[DESCRIPTION]</div>
</div>

Code Blocks

Standard:

<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
    Indented content
</div>

CSS:

.code-block {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    overflow-x: auto;
    line-height: 1.6;
}

Example Boxes

Pattern:

<div class="example-box">
    <div class="example-title">[TITLE]</div>
    <p>[CONTENT]</p>
</div>

CSS:

.example-box {
    background: #fff;
    border: 2px solid #667eea;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

Legends

Pattern:

<div class="legend">
    <div class="legend-item">
        <div class="legend-box" style="background: #4299e1;"></div>
        <span>[DESCRIPTION]</span>
    </div>
    <!-- More items -->
</div>

CSS:

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: #edf2f7;
    border-radius: 10px;
}

SVG Styling

Default SVG Styles

Container:

svg {
    width: 100%;
    height: auto;
}

Text:

svg text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Common Stroke/Fill Combinations

Primary Box:

Fill: #4299e1
Stroke: #2b6cb0
Stroke-width: 3

Success Box:

Fill: #48bb78
Stroke: #2f855a
Stroke-width: 3

Warning Box:

Fill: #f59e0b
Stroke: #d97706
Stroke-width: 3

Neutral/Pending:

Fill: #cbd5e0
Stroke: #a0aec0
Stroke-width: 2-3

ViewBox Guidelines

Common Aspect Ratios:

Wide: viewBox="0 0 1200 400" (3:1)
Standard: viewBox="0 0 1200 600" (2:1)
Balanced: viewBox="0 0 1200 800" (3:2)
Square: viewBox="0 0 600 600" (1:1)
Portrait: viewBox="0 0 800 1000" (4:5)

Coordinate System:

Origin: Top-left (0, 0)
X increases rightward
Y increases downward
Units are relative to viewBox

Accessibility

Color Blindness

Safe Patterns:

Don't rely on color alone (use icons, labels, patterns)
Use both fill and stroke for differentiation
Ensure shapes differ (circle vs square vs diamond)
Add text labels to all visual elements

Color Combinations to Avoid:

Red/green alone (common color blindness)
Blue/purple alone (hard to distinguish)
Low contrast combinations

Screen Readers

HTML Structure:

Use semantic tags: <section>, <article>, <header>, <footer>
Proper heading hierarchy: h1 → h2 → h3
Descriptive text around SVG diagrams

ARIA (if needed):

<svg aria-labelledby="chart-title" role="img">
    <title id="chart-title">Process Flow Diagram</title>
    <!-- SVG content -->
</svg>

Keyboard Navigation

Ensure all interactive elements are focusable
Visible focus indicators
Logical tab order

Animation (Optional)

Subtle Transitions

Hover Effects:

.metric-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

Fade In:

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section {
    animation: fadeIn 0.5s ease-in;
}

Note: Keep animations subtle and optional - avoid distracting from content.

SVG Component Library

Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.

SVG Fundamentals

Basic Structure

<svg viewBox="0 0 1200 800" style="width: 100%; height: auto;">
    <defs>
        <!-- Reusable definitions (markers, gradients, patterns) -->
    </defs>

    <g id="group-name">
        <!-- Grouped elements -->
    </g>

    <!-- Direct elements -->
</svg>

ViewBox Explained

Format: viewBox="min-x min-y width height" Example: viewBox="0 0 1200 800"

min-x, min-y: Usually 0 0 (top-left origin)
width, height: Virtual coordinate system dimensions
SVG scales to fit container while maintaining aspect ratio
Larger viewBox = more space for content

Common Sizes:

<!-- Wide flowchart -->
<svg viewBox="0 0 1200 400">

<!-- Standard diagram -->
<svg viewBox="0 0 1200 600">

<!-- Detailed flowchart -->
<svg viewBox="0 0 1200 800">

<!-- Square chart -->
<svg viewBox="0 0 600 600">

<!-- Vertical timeline -->
<svg viewBox="0 0 800 1000">

Coordinate System

X-axis: Left (0) to right (positive)
Y-axis: Top (0) to bottom (positive)
Center of 1200×800 viewBox: (600, 400)
Units: Relative to viewBox (not pixels)

Basic Shapes

Rectangle

Standard Rectangle:

<rect x="100" y="100" width="200" height="100"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Rounded Rectangle:

<rect x="100" y="100" width="200" height="100" rx="10"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

rx: Horizontal corner radius
ry: Vertical corner radius (defaults to rx if omitted)

Process Box with Text:

<rect x="50" y="50" width="200" height="100" rx="10"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="150" y="95" text-anchor="middle" fill="white"
      font-size="16" font-weight="bold">
    Process Name
</text>
<text x="150" y="115" text-anchor="middle" fill="white" font-size="12">
    Subtitle
</text>

Position Calculation:

Text X: rect.x + (rect.width / 2) for center
Text Y: rect.y + (rect.height / 2) for vertical center (approximately)
Baseline adjustment: Add 5-10px to Y for visual centering

Circle

Basic Circle:

<circle cx="300" cy="200" r="50"
        fill="#48bb78" stroke="#2f855a" stroke-width="3"/>

cx, cy: Center coordinates
r: Radius

Circle with Text (Start/End Node):

<circle cx="300" cy="200" r="50"
        fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="300" y="205" text-anchor="middle" fill="white"
      font-size="16" font-weight="bold">
    START
</text>

Small Marker Circle:

<circle cx="300" cy="200" r="15"
        fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Ellipse

<ellipse cx="400" cy="200" rx="120" ry="60"
         fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>

rx: Horizontal radius
ry: Vertical radius

Path Shapes

Diamond (Decision Node)

Diamond Formula:

Top:    (center-x, top-y)
Right:  (right-x, center-y)
Bottom: (center-x, bottom-y)
Left:   (left-x, center-y)

Example (100px wide, 100px tall, centered at 600, 150):

<path d="M 600 100 L 650 150 L 600 200 L 550 150 Z"
      fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
<text x="600" y="155" text-anchor="middle" font-size="14" font-weight="bold">
    Decision?
</text>

Larger Diamond (200×100):

<path d="M 600 130 L 700 130 L 750 180 L 700 230 L 500 230 L 450 180 Z"
      fill="#fbbf24" stroke="#d97706" stroke-width="3"/>

Hexagon (Preparation)

Horizontal Hexagon:

<path d="M 900 75 L 1050 75 L 1100 100 L 1050 125 L 900 125 L 850 100 Z"
      fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>

Pattern:

M [left-mid-x] [top-y]          (start left of top edge)
L [right-mid-x] [top-y]         (top edge)
L [right-x] [center-y]          (top-right slope)
L [right-mid-x] [bottom-y]      (bottom edge)
L [left-mid-x] [bottom-y]       (bottom edge)
L [left-x] [center-y]           (top-left slope)
Z                                (close path)

Parallelogram

<path d="M 100 100 L 280 100 L 250 150 L 70 150 Z"
      fill="#ed8936" stroke="#c05621" stroke-width="3"/>

Custom Polygons

Triangle:

<path d="M 500 100 L 600 200 L 400 200 Z"
      fill="#f56565" stroke="#c53030" stroke-width="3"/>

Pentagon:

<path d="M 500 100 L 580 150 L 550 230 L 450 230 L 420 150 Z"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Lines & Arrows

Straight Lines

Horizontal:

<line x1="100" y1="200" x2="300" y2="200"
      stroke="#2d3748" stroke-width="3"/>

Vertical:

<line x1="200" y1="100" x2="200" y2="300"
      stroke="#2d3748" stroke-width="3"/>

Diagonal:

<line x1="100" y1="100" x2="300" y2="300"
      stroke="#2d3748" stroke-width="3"/>

Dashed Line:

<line x1="100" y1="200" x2="300" y2="200"
      stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5"/>

stroke-dasharray="dash,gap": Pattern of dashes and gaps
Common patterns: "5,5" (small), "10,5" (medium), "20,10" (large)

Path-based Lines

Straight line with path:

<path d="M 100 200 L 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

fill="none": Prevents filling (required for non-closed paths used as lines)

L-shaped connector:

<path d="M 250 100 L 400 100 L 400 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Multi-segment:

<path d="M 100 100 L 200 100 L 200 200 L 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Arrow Markers

Standard Arrowhead Definition:

<defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
    </marker>
</defs>

markerWidth/Height: Size of marker viewport
refX/refY: Anchor point (where arrow attaches to line)
orient="auto": Rotates to match line angle

Colored Arrows:

<defs>
    <marker id="arrowhead-success" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
    </marker>

    <marker id="arrowhead-error" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#f56565"/>
    </marker>
</defs>

Using Arrows:

<!-- Arrow at end -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-end="url(#arrowhead)"/>

<!-- Arrow at start -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-start="url(#arrowhead)"/>

<!-- Arrows at both ends -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-start="url(#arrowhead)" marker-end="url(#arrowhead)"/>

Curved Lines (Bezier Curves)

Quadratic Bezier (Q):

<path d="M 100 200 Q 200 100 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Format: Q control-x control-y end-x end-y
One control point

Cubic Bezier (C):

<path d="M 100 200 C 150 100, 250 100, 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Format: C control1-x control1-y control2-x control2-y end-x end-y
Two control points (more control)

Smooth Curve Through Points:

<path d="M 100 200 Q 150 150 200 200 T 300 200"
      stroke="#4299e1" stroke-width="3" fill="none"/>

T: Smooth continuation of quadratic curve

Text Elements

Basic Text

<text x="100" y="100" font-size="16" fill="#2d3748">
    Simple Text
</text>

Text Anchoring

Horizontal Alignment:

<!-- Left-aligned (default) -->
<text x="100" y="100" text-anchor="start">Left</text>

<!-- Center-aligned -->
<text x="100" y="100" text-anchor="middle">Center</text>

<!-- Right-aligned -->
<text x="100" y="100" text-anchor="end">Right</text>

Vertical Alignment:

<!-- Baseline (default) -->
<text x="100" y="100" dominant-baseline="auto">Baseline</text>

<!-- Middle -->
<text x="100" y="100" dominant-baseline="middle">Middle</text>

<!-- Hanging (top) -->
<text x="100" y="100" dominant-baseline="hanging">Top</text>

Note: For reliable vertical centering, calculate Y position manually rather than relying on dominant-baseline (browser support varies).

Text Styling

<text x="100" y="100"
      font-size="18"
      font-weight="bold"
      font-style="italic"
      fill="#2d3748"
      opacity="0.8">
    Styled Text
</text>

Font Families in SVG:

<text x="100" y="100" font-family="'Segoe UI', sans-serif">
    Custom Font
</text>

Multi-line Text

Using Multiple <text> Elements:

<text x="150" y="90" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Line 1
</text>
<text x="150" y="110" text-anchor="middle" fill="white" font-size="12">
    Line 2
</text>
<text x="150" y="125" text-anchor="middle" fill="white" font-size="11">
    Line 3
</text>

Line Spacing: Typically 15-25px between lines depending on font size

Text on Path

<defs>
    <path id="curve" d="M 100 200 Q 300 100 500 200" fill="none"/>
</defs>

<text font-size="16" fill="#2d3748">
    <textPath href="#curve">
        Text following the curve
    </textPath>
</text>

Gradients

Linear Gradient

<defs>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#4299e1;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#2b6cb0;stop-opacity:1" />
    </linearGradient>
</defs>

<rect x="100" y="100" width="200" height="100" fill="url(#blueGradient)"/>

Gradient Directions:

Horizontal: x1="0%" y1="0%" x2="100%" y2="0%"
Vertical: x1="0%" y1="0%" x2="0%" y2="100%"
Diagonal: x1="0%" y1="0%" x2="100%" y2="100%"

Radial Gradient

<defs>
    <radialGradient id="radialGlow">
        <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.5" />
    </radialGradient>
</defs>

<circle cx="300" cy="200" r="80" fill="url(#radialGlow)"/>

Multi-stop Gradients

<linearGradient id="multiColor" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#48bb78" />
    <stop offset="50%" style="stop-color:#f59e0b" />
    <stop offset="100%" style="stop-color:#f56565" />
</linearGradient>

Grouping & Reuse

Groups (<g>)

<g id="icon-group" transform="translate(100, 100)">
    <circle r="30" fill="#4299e1"/>
    <text y="5" text-anchor="middle" fill="white" font-weight="bold">✓</text>
</g>

Benefits:

Apply transformations to multiple elements
Organize related elements
Apply styles to all children

Use Element

Define once:

<defs>
    <g id="status-icon">
        <circle r="15" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
        <text text-anchor="middle" fill="white" font-size="12" font-weight="bold">✓</text>
    </g>
</defs>

Reuse multiple times:

<use href="#status-icon" x="100" y="100"/>
<use href="#status-icon" x="300" y="100"/>
<use href="#status-icon" x="500" y="100"/>

Symbol Element

<defs>
    <symbol id="check-icon" viewBox="0 0 30 30">
        <circle cx="15" cy="15" r="15" fill="#48bb78"/>
        <path d="M 8 15 L 13 20 L 22 10" stroke="white" stroke-width="3"
              fill="none" stroke-linecap="round"/>
    </symbol>
</defs>

<use href="#check-icon" x="100" y="100" width="30" height="30"/>
<use href="#check-icon" x="200" y="100" width="50" height="50"/>

Symbol vs Group:

Symbol has its own viewBox (scalable)
Symbol not rendered unless used
Better for reusable icons

Transformations

Translate (Move)

<rect x="0" y="0" width="100" height="50" fill="#4299e1"
      transform="translate(200, 100)"/>

Moves shape to new position
Original x, y still apply (total position = original + translate)

Rotate

<rect x="100" y="100" width="100" height="50" fill="#4299e1"
      transform="rotate(45 150 125)"/>

Format: rotate(angle center-x center-y)
Angle in degrees
Rotates around specified center point

Scale

<circle cx="200" cy="200" r="30" fill="#48bb78"
        transform="scale(1.5)"/>

scale(factor): Uniform scaling
scale(x-factor, y-factor): Non-uniform scaling

Combined Transformations

<rect x="0" y="0" width="100" height="50" fill="#4299e1"
      transform="translate(200, 100) rotate(15) scale(1.2)"/>

Applied right to left: scale → rotate → translate

Advanced Patterns

Rounded Progress Bar

<!-- Background -->
<rect x="150" y="80" width="800" height="40" rx="20" fill="#e2e8f0"/>

<!-- Progress (60%) -->
<rect x="150" y="80" width="480" height="40" rx="20" fill="#48bb78"/>

Donut Chart (Simplified)

<circle cx="300" cy="300" r="150" fill="none"
        stroke="#4299e1" stroke-width="80"/>

Multi-segment Donut:

<!-- Segment 1 (50% of circle = 471 units out of 942 total circumference) -->
<circle cx="300" cy="300" r="150" fill="none"
        stroke="#4299e1" stroke-width="80"
        stroke-dasharray="471 471"
        transform="rotate(-90 300 300)"/>

<!-- Segment 2 (30%) -->
<circle cx="300" cy="300" r="150" fill="none"
        stroke="#48bb78" stroke-width="80"
        stroke-dasharray="283 659"
        stroke-dashoffset="-471"
        transform="rotate(-90 300 300)"/>

Circumference Formula: 2 × π × radius = 2 × 3.14159 × 150 ≈ 942

Drop Shadow Filter

<defs>
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</defs>

<rect x="100" y="100" width="200" height="100" rx="10"
      fill="#4299e1" filter="url(#drop-shadow)"/>

Clipping Path

<defs>
    <clipPath id="rounded-clip">
        <rect x="100" y="100" width="200" height="150" rx="15"/>
    </clipPath>
</defs>

<image x="100" y="100" width="200" height="150"
       href="image.jpg" clip-path="url(#rounded-clip)"/>

Chart Components

Bar Chart Bar

<rect x="200" y="150" width="150" height="200" rx="5"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="275" y="260" text-anchor="middle" fill="white"
      font-size="24" font-weight="bold">
    456
</text>

Axis Lines

<!-- X-axis -->
<line x1="100" y1="350" x2="1100" y2="350"
      stroke="#2d3748" stroke-width="2"/>

<!-- Y-axis -->
<line x1="100" y1="350" x2="100" y2="80"
      stroke="#2d3748" stroke-width="2"/>

<!-- Grid lines -->
<line x1="100" y1="280" x2="1100" y2="280"
      stroke="#e2e8f0" stroke-width="1" opacity="0.5"/>

Data Point Marker

<circle cx="300" cy="200" r="6" fill="#4299e1"
        stroke="white" stroke-width="2"/>

Best Practices

Coordinate Calculation

Center Text in Rectangle:

textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)

Position Diamond Points:

centerX = 600, centerY = 180
halfWidth = 100, halfHeight = 50

top:    (centerX, centerY - halfHeight)
right:  (centerX + halfWidth, centerY)
bottom: (centerX, centerY + halfHeight)
left:   (centerX - halfWidth, centerY)

Performance Tips

Limit total SVG elements per diagram to ~500-1000
Use <use> for repeated elements
Avoid overly complex paths
Minimize filter usage (shadows, blurs)
Group related elements

Readability Guidelines

Minimum stroke-width: 2px for visibility
Minimum font-size: 11px for labels, 14px for emphasis
Minimum touch target: 30×30px for interactive elements
White space: 20-30px between major elements
Contrast: Stroke should be darker than fill

Debugging SVG

Visible Boundaries:

<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
      fill="none" stroke="red" stroke-width="1"/>

Grid Overlay:

<!-- Shows 100px grid -->
<line x1="0" y1="100" x2="1200" y2="100" stroke="pink" stroke-width="1"/>
<line x1="0" y1="200" x2="1200" y2="200" stroke="pink" stroke-width="1"/>
<!-- ... repeat for debugging ... -->

Icon Library

Checkmark

<path d="M 8 15 L 13 20 L 22 10"
      stroke="#48bb78" stroke-width="3" fill="none"
      stroke-linecap="round" stroke-linejoin="round"/>

X (Close)

<path d="M 10 10 L 20 20 M 20 10 L 10 20"
      stroke="#f56565" stroke-width="3"
      stroke-linecap="round"/>

Warning Triangle

<path d="M 15 5 L 25 23 L 5 23 Z"
      fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="15" y="20" text-anchor="middle" fill="white"
      font-weight="bold" font-size="14">!</text>

Info Circle

<circle cx="15" cy="15" r="12" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="15" y="20" text-anchor="middle" fill="white"
      font-weight="bold" font-size="16">i</text>

Related skills

Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k

Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k

CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k

Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k

Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72

Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10

AI & Agent Buildingagents