Dashboard Creator

Name: Dashboard Creator
Author: mhattingpete

mhattingpete/claude-skills-marketplace

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

Spin up admin or analytics dashboards with charts, filters, and layout when shipping internal tools, SaaS reporting views, or stakeholder-facing metric pages.

About

Helps Claude design and implement data dashboards end to end: choosing layout grids, wiring metrics into charts and tables, adding filters and empty states, and producing production-ready frontend code for analytics and admin surfaces.

Opinionated dashboard scaffolding and component patterns
Chart, table, and filter composition workflows
Hooks real or mock metrics into readable layouts
Accelerates internal ops and customer-facing analytics UIs

Dashboard Creator by the numbers

266 all-time installs (skills.sh)
+13 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #783 of 2,245 Frontend Development 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 dashboard-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/dashboard-creator.svg)](https://skillselion.com/skills/mhattingpete/claude-skills-marketplace/dashboard-creator)

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

What it does

Spin up admin or analytics dashboards with charts, filters, and layout when shipping internal tools, SaaS reporting views, or stakeholder-facing metric pages.

Files

SKILL.mdMarkdownGitHub ↗

Dashboard Creator

Create interactive HTML dashboards with KPI cards and charts.

When to Use

"Create dashboard for [metrics]"
"Show KPI visualization"
"Generate performance dashboard"
"Make analytics dashboard with charts"

Components

1. KPI Cards: metric name, value, change %, trend icon 2. Charts: bar/pie/line using SVG or CSS 3. Progress Bars: completion indicators 4. Data Tables: tabular data display

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>[Project] Dashboard</title>
  <style>
    body { font-family: system-ui; background: #f7fafc; }
    .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .kpi-value { font-size: 36px; font-weight: bold; }
    .trend-up { color: #48bb78; }
    .trend-down { color: #e53e3e; }
  </style>
</head>
<body>
  <h1>[Dashboard Name]</h1>
  <div class="grid">
    <!-- KPI cards -->
    <!-- Charts -->
    <!-- Progress bars -->
  </div>
</body>
</html>

KPI Card Pattern

<div class="kpi-card">
  <div class="kpi-label">Revenue</div>
  <div class="kpi-value">$124K</div>
  <div class="trend-up">↑ 12.5%</div>
</div>

Chart Pattern (SVG Bar Chart)

<svg viewBox="0 0 400 300">
  <rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
  <rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
  <!-- bars for each data point -->
</svg>

Workflow

1. Extract metrics and data 2. Create KPI cards grid 3. Generate charts (bar/pie/line) as SVG 4. Add progress indicators 5. Write to [name]-dashboard.html

Use semantic colors: green (positive), red (negative), blue (neutral).

<!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>

<!-- DASHBOARD COMPONENTS LIBRARY -->
<!-- Copy and customize these patterns for metric dashboards and data visualizations -->

<!-- ===== METRIC CARDS ===== -->

<!-- Standard metric card (gradient background) -->
<div class="metric-card">
    <div class="metric-value">1,234</div>
    <div class="metric-label">Total Items</div>
</div>

<!-- Metric card with subtitle -->
<div class="metric-card">
    <div class="metric-value">89%</div>
    <div class="metric-label">Completion Rate<br><small>Last 30 days</small></div>
</div>

<!-- Metric card with custom colors -->
<div class="metric-card" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);">
    <div class="metric-value">✓ 456</div>
    <div class="metric-label">Completed Tasks</div>
</div>

<div class="metric-card" style="background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);">
    <div class="metric-value">⚠ 23</div>
    <div class="metric-label">Critical Issues</div>
</div>

<!-- ===== BAR CHARTS (SVG) ===== -->

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

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

    <!-- Y-axis labels -->
    <text x="80" y="355" text-anchor="end" font-size="12" fill="#718096">0</text>
    <text x="80" y="280" text-anchor="end" font-size="12" fill="#718096">200</text>
    <text x="80" y="205" text-anchor="end" font-size="12" fill="#718096">400</text>
    <text x="80" y="130" text-anchor="end" font-size="12" fill="#718096">600</text>
    <text x="80" y="85" text-anchor="end" font-size="12" fill="#718096">800</text>

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

    <!-- Bar 1 -->
    <rect x="200" y="120" width="200" height="230" rx="5"
          fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
    <text x="300" y="250" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
        645
    </text>
    <text x="300" y="380" text-anchor="middle" font-size="14" fill="#2d3748">
        Category A
    </text>

    <!-- Bar 2 -->
    <rect x="500" y="180" width="200" height="170" rx="5"
          fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
    <text x="600" y="270" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
        428
    </text>
    <text x="600" y="380" text-anchor="middle" font-size="14" fill="#2d3748">
        Category B
    </text>

    <!-- Bar 3 -->
    <rect x="800" y="260" width="200" height="90" rx="5"
          fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
    <text x="900" y="310" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
        167
    </text>
    <text x="900" y="380" text-anchor="middle" font-size="14" fill="#2d3748">
        Category C
    </text>
</svg>

<!-- ===== HORIZONTAL BAR CHART ===== -->

<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">
        Progress by Module
    </text>

    <!-- Module 1 -->
    <text x="50" y="100" font-size="14" fill="#2d3748" font-weight="500">
        Module A
    </text>
    <rect x="150" y="80" width="800" height="40" rx="20" fill="#e2e8f0"/>
    <rect x="150" y="80" width="640" height="40" rx="20" fill="#48bb78"/>
    <text x="970" y="105" font-size="14" fill="#2d3748" font-weight="bold">
        80%
    </text>

    <!-- Module 2 -->
    <text x="50" y="180" font-size="14" fill="#2d3748" font-weight="500">
        Module B
    </text>
    <rect x="150" y="160" width="800" height="40" rx="20" fill="#e2e8f0"/>
    <rect x="150" y="160" width="560" height="40" rx="20" fill="#4299e1"/>
    <text x="970" y="185" font-size="14" fill="#2d3748" font-weight="bold">
        70%
    </text>

    <!-- Module 3 -->
    <text x="50" y="260" font-size="14" fill="#2d3748" font-weight="500">
        Module C
    </text>
    <rect x="150" y="240" width="800" height="40" rx="20" fill="#e2e8f0"/>
    <rect x="150" y="240" width="360" height="40" rx="20" fill="#f59e0b"/>
    <text x="970" y="265" font-size="14" fill="#2d3748" font-weight="bold">
        45%
    </text>

    <!-- Module 4 -->
    <text x="50" y="340" font-size="14" fill="#2d3748" font-weight="500">
        Module D
    </text>
    <rect x="150" y="320" width="800" height="40" rx="20" fill="#e2e8f0"/>
    <rect x="150" y="320" width="200" height="40" rx="20" fill="#f56565"/>
    <text x="970" y="345" font-size="14" fill="#2d3748" font-weight="bold">
        25%
    </text>

    <!-- Legend -->
    <text x="200" y="420" font-size="12" fill="#718096">
        0%
    </text>
    <text x="550" y="420" font-size="12" fill="#718096">
        50%
    </text>
    <text x="920" y="420" font-size="12" fill="#718096">
        100%
    </text>
</svg>

<!-- ===== PIE/DONUT CHART ===== -->

<svg viewBox="0 0 600 600" style="width: 100%; height: auto;">
    <text x="300" y="40" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
        Task Distribution
    </text>

    <!-- Donut chart segments (simplified - use proper arc paths for real charts) -->
    <circle cx="300" cy="320" r="150" fill="none" stroke="#4299e1" stroke-width="80"
            stroke-dasharray="471 0" transform="rotate(-90 300 320)"/>
    <circle cx="300" cy="320" r="150" fill="none" stroke="#48bb78" stroke-width="80"
            stroke-dasharray="235 236" stroke-dashoffset="0" transform="rotate(-90 300 320)"/>
    <circle cx="300" cy="320" r="150" fill="none" stroke="#f59e0b" stroke-width="80"
            stroke-dasharray="118 353" stroke-dashoffset="-235" transform="rotate(-90 300 320)"/>
    <circle cx="300" cy="320" r="150" fill="none" stroke="#f56565" stroke-width="80"
            stroke-dasharray="71 400" stroke-dashoffset="-353" transform="rotate(-90 300 320)"/>

    <!-- Center text -->
    <text x="300" y="310" text-anchor="middle" font-size="48" font-weight="bold" fill="#2d3748">
        1,240
    </text>
    <text x="300" y="340" text-anchor="middle" font-size="16" fill="#718096">
        Total Tasks
    </text>

    <!-- Legend -->
    <g transform="translate(450, 200)">
        <circle cx="0" cy="0" r="8" fill="#4299e1"/>
        <text x="15" y="5" font-size="14" fill="#2d3748">Complete (50%)</text>
    </g>
    <g transform="translate(450, 240)">
        <circle cx="0" cy="0" r="8" fill="#48bb78"/>
        <text x="15" y="5" font-size="14" fill="#2d3748">In Progress (25%)</text>
    </g>
    <g transform="translate(450, 280)">
        <circle cx="0" cy="0" r="8" fill="#f59e0b"/>
        <text x="15" y="5" font-size="14" fill="#2d3748">Pending (15%)</text>
    </g>
    <g transform="translate(450, 320)">
        <circle cx="0" cy="0" r="8" fill="#f56565"/>
        <text x="15" y="5" font-size="14" fill="#2d3748">Blocked (10%)</text>
    </g>
</svg>

<!-- ===== LINE CHART / TREND ===== -->

<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">
        Performance Trend
    </text>

    <!-- Axes -->
    <line x1="100" y1="350" x2="1100" y2="350" stroke="#2d3748" stroke-width="2"/>
    <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"/>
    <line x1="100" y1="210" x2="1100" y2="210" stroke="#e2e8f0" stroke-width="1"/>
    <line x1="100" y1="140" x2="1100" y2="140" stroke="#e2e8f0" stroke-width="1"/>

    <!-- Y-axis labels -->
    <text x="80" y="355" text-anchor="end" font-size="12" fill="#718096">0</text>
    <text x="80" y="285" text-anchor="end" font-size="12" fill="#718096">25</text>
    <text x="80" y="215" text-anchor="end" font-size="12" fill="#718096">50</text>
    <text x="80" y="145" text-anchor="end" font-size="12" fill="#718096">75</text>
    <text x="80" y="85" text-anchor="end" font-size="12" fill="#718096">100</text>

    <!-- X-axis labels -->
    <text x="200" y="375" text-anchor="middle" font-size="12" fill="#718096">Jan</text>
    <text x="350" y="375" text-anchor="middle" font-size="12" fill="#718096">Feb</text>
    <text x="500" y="375" text-anchor="middle" font-size="12" fill="#718096">Mar</text>
    <text x="650" y="375" text-anchor="middle" font-size="12" fill="#718096">Apr</text>
    <text x="800" y="375" text-anchor="middle" font-size="12" fill="#718096">May</text>
    <text x="950" y="375" text-anchor="middle" font-size="12" fill="#718096">Jun</text>

    <!-- Area under line (gradient fill) -->
    <defs>
        <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#4299e1;stop-opacity:0.3" />
            <stop offset="100%" style="stop-color:#4299e1;stop-opacity:0.05" />
        </linearGradient>
    </defs>
    <path d="M 200 280 L 350 230 L 500 200 L 650 160 L 800 140 L 950 120 L 950 350 L 200 350 Z"
          fill="url(#areaGradient)"/>

    <!-- Line -->
    <path d="M 200 280 L 350 230 L 500 200 L 650 160 L 800 140 L 950 120"
          stroke="#4299e1" stroke-width="3" fill="none"/>

    <!-- Data points -->
    <circle cx="200" cy="280" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
    <circle cx="350" cy="230" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
    <circle cx="500" cy="200" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
    <circle cx="650" cy="160" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
    <circle cx="800" cy="140" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
    <circle cx="950" cy="120" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>

    <!-- Value labels on data points -->
    <text x="200" y="268" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">45</text>
    <text x="350" y="218" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">58</text>
    <text x="500" y="188" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">67</text>
    <text x="650" y="148" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">78</text>
    <text x="800" y="128" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">84</text>
    <text x="950" y="108" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">92</text>
</svg>

<!-- ===== GAUGE / RADIAL PROGRESS ===== -->

<svg viewBox="0 0 400 300" style="width: 100%; height: auto;">
    <text x="200" y="30" text-anchor="middle" font-size="18" font-weight="bold" fill="#2d3748">
        System Health
    </text>

    <!-- Background arc -->
    <path d="M 100 200 A 100 100 0 0 1 300 200"
          stroke="#e2e8f0" stroke-width="30" fill="none" stroke-linecap="round"/>

    <!-- Progress arc (75% = 270 degrees) -->
    <path d="M 100 200 A 100 100 0 1 1 271 129"
          stroke="#48bb78" stroke-width="30" fill="none" stroke-linecap="round"/>

    <!-- Center text -->
    <text x="200" y="190" text-anchor="middle" font-size="48" font-weight="bold" fill="#2d3748">
        75%
    </text>
    <text x="200" y="215" text-anchor="middle" font-size="14" fill="#718096">
        Excellent
    </text>
</svg>

<!-- ===== STATUS INDICATORS ===== -->

<!-- Traffic light style -->
<div style="display: flex; gap: 30px; justify-content: center; align-items: center; padding: 20px;">
    <div style="text-align: center;">
        <div style="width: 60px; height: 60px; border-radius: 50%; background: #48bb78; margin: 0 auto 10px;"></div>
        <div style="font-size: 14px; color: #2d3748;">Good<br><strong>89%</strong></div>
    </div>
    <div style="text-align: center;">
        <div style="width: 60px; height: 60px; border-radius: 50%; background: #f59e0b; margin: 0 auto 10px;"></div>
        <div style="font-size: 14px; color: #2d3748;">Warning<br><strong>8%</strong></div>
    </div>
    <div style="text-align: center;">
        <div style="width: 60px; height: 60px; border-radius: 50%; background: #f56565; margin: 0 auto 10px;"></div>
        <div style="font-size: 14px; color: #2d3748;">Critical<br><strong>3%</strong></div>
    </div>
</div>

<!-- ===== COMPARISON TABLE ===== -->

<div style="background: #f7fafc; padding: 20px; border-radius: 10px; margin: 20px 0;">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="border-bottom: 2px solid #667eea;">
                <th style="padding: 15px; text-align: left; color: #2d3748; font-size: 14px;">Metric</th>
                <th style="padding: 15px; text-align: center; color: #2d3748; font-size: 14px;">Current</th>
                <th style="padding: 15px; text-align: center; color: #2d3748; font-size: 14px;">Target</th>
                <th style="padding: 15px; text-align: center; color: #2d3748; font-size: 14px;">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr style="border-bottom: 1px solid #e2e8f0;">
                <td style="padding: 15px; color: #4a5568;">Response Time</td>
                <td style="padding: 15px; text-align: center; font-weight: bold; color: #2d3748;">245ms</td>
                <td style="padding: 15px; text-align: center; color: #718096;">< 300ms</td>
                <td style="padding: 15px; text-align: center;"><span style="color: #48bb78; font-weight: bold;">✓ On Track</span></td>
            </tr>
            <tr style="border-bottom: 1px solid #e2e8f0;">
                <td style="padding: 15px; color: #4a5568;">Uptime</td>
                <td style="padding: 15px; text-align: center; font-weight: bold; color: #2d3748;">99.8%</td>
                <td style="padding: 15px; text-align: center; color: #718096;">99.9%</td>
                <td style="padding: 15px; text-align: center;"><span style="color: #f59e0b; font-weight: bold;">⚠ Below Target</span></td>
            </tr>
            <tr>
                <td style="padding: 15px; color: #4a5568;">Error Rate</td>
                <td style="padding: 15px; text-align: center; font-weight: bold; color: #2d3748;">0.02%</td>
                <td style="padding: 15px; text-align: center; color: #718096;">< 0.1%</td>
                <td style="padding: 15px; text-align: center;"><span style="color: #48bb78; font-weight: bold;">✓ Exceeding</span></td>
            </tr>
        </tbody>
    </table>
</div>

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

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4k

Image To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

Frontend Developmentfrontendbackendintegrations