# Infographic Patterns

Patterns for creating infographics that combine multiple elements: data, illustrations, icons, and text into cohesive visual stories.

## Product Catalog / E-commerce Layout

### Product Grid with AI Chat

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700">
  <defs>
    <filter id="cardShadow">
      <feDropShadow dx="0" dy="2" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="1000" height="700" fill="#f8fafc"/>
  
  <!-- Product Table Panel -->
  <g id="product-table" transform="translate(50, 80)">
    <rect x="0" y="0" width="480" height="500" rx="16" fill="white" filter="url(#cardShadow)"/>
    
    <!-- Header -->
    <g transform="translate(20, 20)">
      <circle cx="10" cy="10" r="8" fill="#6366f1"/>
      <text x="28" y="15" font-size="16" font-weight="600" fill="#0f172a">Product catalog</text>
    </g>
    
    <!-- Column headers -->
    <g transform="translate(20, 60)" font-size="12" fill="#64748b">
      <text x="60" y="0">SKU</text>
      <text x="160" y="0">Name</text>
      <text x="300" y="0">Type</text>
    </g>
    
    <!-- Product rows -->
    <g transform="translate(20, 80)">
      <!-- Row 1 -->
      <g transform="translate(0, 0)">
        <rect x="0" y="0" width="40" height="40" rx="6" fill="#1e3a5f"/>
        <text x="60" y="25" font-size="12" fill="#64748b">SWT180310</text>
        <text x="160" y="25" font-size="13" fill="#0f172a">Essential Hoodie</text>
        <text x="300" y="25" font-size="12" fill="#64748b">clothing_hoodie</text>
      </g>
      
      <!-- Row 2 -->
      <g transform="translate(0, 55)">
        <rect x="0" y="0" width="40" height="40" rx="6" fill="#9ca3af"/>
        <text x="60" y="25" font-size="12" fill="#64748b">SWT431325</text>
        <text x="160" y="25" font-size="13" fill="#0f172a">Essential Hoodie</text>
        <text x="300" y="25" font-size="12" fill="#64748b">clothing_hoodie</text>
      </g>
      
      <!-- Highlighted row (selected) -->
      <g transform="translate(0, 110)">
        <rect x="-10" y="-5" width="450" height="50" rx="6" fill="#eff6ff" stroke="#3b82f6" stroke-dasharray="4"/>
        <rect x="0" y="0" width="40" height="40" rx="6" fill="#1e3a5f"/>
        <text x="60" y="25" font-size="12" fill="#64748b">SWT180310</text>
        <text x="160" y="25" font-size="13" fill="#0f172a">Essential Hoodie</text>
        <text x="300" y="25" font-size="12" fill="#64748b">clothing_hoodie</text>
      </g>
      
      <!-- Row 4 - shirt -->
      <g transform="translate(0, 165)">
        <rect x="-10" y="-5" width="450" height="50" rx="6" fill="#eff6ff" stroke="#3b82f6" stroke-dasharray="4"/>
        <rect x="0" y="0" width="40" height="40" rx="6" fill="#3b82f6"/>
        <text x="60" y="25" font-size="12" fill="#64748b">TEE122525</text>
        <text x="160" y="25" font-size="13" fill="#0f172a">Deluxe Shirt</text>
        <text x="300" y="25" font-size="12" fill="#64748b">clothing_shirt</text>
      </g>
      
      <!-- More rows... -->
      <g transform="translate(0, 220)">
        <rect x="0" y="0" width="40" height="40" rx="6" fill="#f59e0b"/>
        <text x="60" y="25" font-size="12" fill="#64748b">HAT182310</text>
        <text x="160" y="25" font-size="13" fill="#0f172a">Nordic Beanie</text>
        <text x="300" y="25" font-size="12" fill="#64748b">accessory_beanie</text>
      </g>
    </g>
  </g>
  
  <!-- AI Chat Panel -->
  <g id="chat-panel" transform="translate(560, 150)">
    <rect x="0" y="0" width="380" height="450" rx="16" fill="white" filter="url(#cardShadow)"/>
    
    <!-- Chat header -->
    <text x="190" y="35" text-anchor="middle" font-size="18" font-weight="600" fill="#0f172a">ElementaraAI</text>
    
    <!-- User message bubble -->
    <g transform="translate(140, 60)">
      <rect x="0" y="0" width="220" height="60" rx="12" fill="#eff6ff"/>
      <text x="15" y="25" font-size="12" fill="#374151">I'm refreshing my wardrobe. Can you</text>
      <text x="15" y="42" font-size="12" fill="#374151">recommend some cozy, comfortable</text>
      <text x="15" y="55" font-size="12" fill="#374151">basics in size M?</text>
    </g>
    
    <!-- AI response bubble -->
    <g transform="translate(20, 140)">
      <rect x="0" y="0" width="240" height="50" rx="12" fill="#f1f5f9"/>
      <text x="15" y="20" font-size="12" fill="#374151">Absolutely. Here are a few comfy</text>
      <text x="15" y="37" font-size="12" fill="#374151">essentials that pair well:</text>
    </g>
    
    <!-- Product recommendations -->
    <g transform="translate(20, 210)">
      <!-- Product card 1 -->
      <g transform="translate(0, 0)">
        <rect x="0" y="0" width="150" height="160" rx="12" fill="#f8fafc"/>
        <rect x="25" y="15" width="100" height="80" rx="8" fill="#3b82f6"/>
        <text x="75" y="115" text-anchor="middle" font-size="12" font-weight="500" fill="#0f172a">Deluxe Shirt</text>
        <text x="75" y="130" text-anchor="middle" font-size="11" fill="#64748b">Blue - Medium</text>
        <text x="75" y="145" text-anchor="middle" font-size="12" font-weight="600" fill="#0f172a">$26.00</text>
      </g>
      
      <!-- Product card 2 -->
      <g transform="translate(165, 0)">
        <rect x="0" y="0" width="150" height="160" rx="12" fill="#f8fafc"/>
        <rect x="25" y="15" width="100" height="80" rx="8" fill="#1e3a5f"/>
        <text x="75" y="115" text-anchor="middle" font-size="12" font-weight="500" fill="#0f172a">Essential Hoodie</text>
        <text x="75" y="130" text-anchor="middle" font-size="11" fill="#64748b">Navy - Medium</text>
        <text x="75" y="145" text-anchor="middle" font-size="12" font-weight="600" fill="#0f172a">$48.00</text>
      </g>
    </g>
    
    <!-- Input field -->
    <g transform="translate(20, 400)">
      <rect x="0" y="0" width="340" height="36" rx="18" fill="white" stroke="#e2e8f0"/>
      <text x="15" y="23" font-size="13" fill="#94a3b8">Type your message</text>
      <circle cx="320" cy="18" r="12" fill="#f1f5f9"/>
      <text x="320" y="22" text-anchor="middle" font-size="12" fill="#64748b">↑</text>
    </g>
  </g>
  
  <!-- Connecting lines (dashed) -->
  <g stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="4" fill="none">
    <path d="M 470 270 Q 520 270 560 300"/>
    <path d="M 470 325 Q 520 325 560 355"/>
  </g>
</svg>
```

## Data + Illustration Combo

### Stats with Visual Elements

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500">
  <!-- Background panels -->
  <g id="stat-panels">
    <!-- Panel 1: Pie chart with stat -->
    <g transform="translate(50, 50)">
      <rect x="0" y="0" width="400" height="400" rx="20" fill="#faf9f6"/>
      
      <!-- Title -->
      <text x="200" y="50" text-anchor="middle" font-size="18" font-weight="600" fill="#374151">
        Organizations Increasing AI Investment
      </text>
      
      <!-- Pie chart -->
      <g transform="translate(200, 220)">
        <circle cx="0" cy="0" r="120" fill="#f97316"/>
        <path d="M 0 0 L 0 -120 A 120 120 0 0 0 -14.87 -119.08 Z" fill="#e5e7eb"/>
        <text x="0" y="10" text-anchor="middle" font-size="56" font-weight="700" fill="white">98%</text>
      </g>
      
      <!-- Legend -->
      <g transform="translate(140, 370)">
        <rect x="0" y="0" width="16" height="16" rx="3" fill="#f97316"/>
        <text x="24" y="13" font-size="14" fill="#374151">Yes</text>
        <rect x="80" y="0" width="16" height="16" rx="3" fill="#e5e7eb"/>
        <text x="104" y="13" font-size="14" fill="#374151">No (2%)</text>
      </g>
    </g>
    
    <!-- Panel 2: Another pie chart -->
    <g transform="translate(500, 50)">
      <rect x="0" y="0" width="400" height="400" rx="20" fill="#faf9f6"/>
      
      <!-- Title -->
      <text x="200" y="50" text-anchor="middle" font-size="18" font-weight="600" fill="#374151">
        Employees Eager to Use AI
      </text>
      
      <!-- Pie chart (51%/49% split) -->
      <g transform="translate(200, 220)">
        <circle cx="0" cy="0" r="120" fill="#e5e7eb"/>
        <path d="M 0 0 L 0 -120 A 120 120 0 1 1 -3.77 119.94 Z" fill="#f97316"/>
        <text x="-30" y="10" text-anchor="middle" font-size="40" font-weight="700" fill="white">51%</text>
        <text x="50" y="10" text-anchor="middle" font-size="40" font-weight="700" fill="#6b7280">49%</text>
      </g>
      
      <!-- Legend -->
      <g transform="translate(140, 370)">
        <rect x="0" y="0" width="16" height="16" rx="3" fill="#f97316"/>
        <text x="24" y="13" font-size="14" fill="#374151">Yes</text>
        <rect x="80" y="0" width="16" height="16" rx="3" fill="#e5e7eb"/>
        <text x="104" y="13" font-size="14" fill="#374151">No</text>
      </g>
    </g>
  </g>
</svg>
```

## Scene with Data Overlay

### Workspace Scene with Charts

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <filter id="panelShadow">
      <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.1"/>
    </filter>
  </defs>
  
  <!-- Light background -->
  <rect width="800" height="600" fill="#faf5ff"/>
  
  <!-- Wall chart panels (background) -->
  <g id="wall-charts" transform="translate(100, 40)">
    <!-- Line chart panel -->
    <g transform="translate(0, 0)">
      <rect x="0" y="0" width="150" height="100" rx="8" fill="#fce7f3"/>
      <path d="M 20 70 L 50 50 L 80 60 L 110 30 L 130 40" 
            stroke="#ec4899" stroke-width="2" fill="none"/>
    </g>
    
    <!-- Pie chart panel -->
    <g transform="translate(170, 0)">
      <rect x="0" y="0" width="100" height="100" rx="8" fill="#fce7f3"/>
      <circle cx="50" cy="50" r="30" fill="#f9a8d4"/>
      <path d="M 50 50 L 50 20 A 30 30 0 0 1 75 60 Z" fill="#c084fc"/>
    </g>
    
    <!-- Bar chart panel -->
    <g transform="translate(0, 120)">
      <rect x="0" y="0" width="120" height="100" rx="8" fill="#fce7f3"/>
      <rect x="15" y="50" width="20" height="35" fill="#f9a8d4"/>
      <rect x="45" y="30" width="20" height="55" fill="#f9a8d4"/>
      <rect x="75" y="40" width="20" height="45" fill="#f9a8d4"/>
    </g>
    
    <!-- Gear/settings icon panel -->
    <g transform="translate(290, 0)">
      <rect x="0" y="0" width="80" height="80" rx="8" fill="#d1fae5"/>
      <circle cx="40" cy="40" r="20" fill="none" stroke="#10b981" stroke-width="3"/>
    </g>
    
    <!-- Large trend chart -->
    <g transform="translate(300, 100)">
      <rect x="0" y="0" width="200" height="130" rx="8" fill="#fdf2f8"/>
      <path d="M 20 100 Q 60 80 100 60 T 180 30" stroke="#ec4899" stroke-width="2" fill="none"/>
      <!-- Area fill -->
      <path d="M 20 100 Q 60 80 100 60 T 180 30 L 180 110 L 20 110 Z" fill="#fce7f3" opacity="0.5"/>
    </g>
  </g>
  
  <!-- Desk surface -->
  <rect x="0" y="450" width="800" height="8" fill="#e2e8f0"/>
  
  <!-- Person sitting (left) -->
  <g id="person-seated" transform="translate(150, 250)">
    <!-- Head -->
    <ellipse cx="0" cy="0" rx="28" ry="32" fill="#fcd5b8"/>
    <!-- Hair -->
    <path d="M -28 0 Q -28 -30 0 -35 Q 28 -30 28 0" fill="#6b4c3a"/>
    <path d="M 20 -15 Q 45 -20 50 5" fill="#6b4c3a"/>
    <!-- Body/blazer -->
    <path d="M -35 35 L -30 140 L 30 140 L 35 35 Q 0 45 -35 35" fill="#c4b5fd"/>
    <!-- Laptop -->
    <g transform="translate(-50, 100)">
      <rect x="0" y="0" width="70" height="45" rx="4" fill="#f9a8d4"/>
      <rect x="5" y="5" width="60" height="35" rx="2" fill="#fce7f3"/>
      <rect x="-5" y="45" width="80" height="8" rx="2" fill="#d1d5db"/>
    </g>
  </g>
  
  <!-- Person standing (right) -->
  <g id="person-standing" transform="translate(550, 150)">
    <!-- Head -->
    <ellipse cx="0" cy="0" rx="26" ry="30" fill="#fcd5b8"/>
    <!-- Hair -->
    <path d="M -26 0 Q -26 -28 0 -32 Q 26 -28 26 0" fill="#1e293b"/>
    <!-- Body/jacket -->
    <path d="M -38 35 L -32 180 L 32 180 L 38 35 Q 0 45 -38 35" fill="#581c87"/>
    <!-- Shirt underneath -->
    <path d="M -20 35 L -20 80 L 20 80 L 20 35" fill="#86efac"/>
    <!-- Arms -->
    <path d="M -38 40 Q -65 70 -50 130" stroke="#fcd5b8" stroke-width="14" fill="none" stroke-linecap="round"/>
    <path d="M 38 40 Q 65 70 70 110" stroke="#fcd5b8" stroke-width="14" fill="none" stroke-linecap="round"/>
    <!-- Legs -->
    <rect x="-22" y="180" width="18" height="80" rx="9" fill="#fef3c7"/>
    <rect x="4" y="180" width="18" height="80" rx="9" fill="#fef3c7"/>
    <!-- Shoes -->
    <ellipse cx="-13" cy="265" rx="16" ry="8" fill="#134e4a"/>
    <ellipse cx="13" cy="265" rx="16" ry="8" fill="#134e4a"/>
    <!-- Tablet in hand -->
    <rect x="50" y="90" width="40" height="50" rx="4" fill="#e2e8f0"/>
    <!-- Pointing gesture -->
    <circle cx="-55" cy="130" r="8" fill="#fcd5b8"/>
  </g>
  
  <!-- Robot arm (center) -->
  <g id="robot" transform="translate(380, 320)">
    <ellipse cx="0" cy="80" rx="35" ry="12" fill="#14b8a6"/>
    <rect x="-18" y="20" width="36" height="60" rx="4" fill="#5eead4"/>
    <circle cx="0" cy="20" r="12" fill="#2dd4bf"/>
    <rect x="-6" y="-50" width="12" height="70" rx="4" fill="#5eead4" transform="rotate(-25 0 -15)"/>
    <rect x="-35" y="-65" width="8" height="30" rx="2" fill="#f97316"/>
  </g>
</svg>
```

## Flow/Process Infographics

### Horizontal Process Flow

```svg
<g id="process-flow">
  <!-- Step 1 -->
  <g transform="translate(50, 100)">
    <circle cx="50" cy="50" r="40" fill="#6366f1"/>
    <text x="50" y="55" text-anchor="middle" font-size="24" font-weight="bold" fill="white">1</text>
    <text x="50" y="115" text-anchor="middle" font-size="14" fill="#374151">Research</text>
  </g>
  
  <!-- Arrow -->
  <path d="M 140 100 L 190 100" stroke="#cbd5e1" stroke-width="3" marker-end="url(#arrowhead)"/>
  
  <!-- Step 2 -->
  <g transform="translate(200, 100)">
    <circle cx="50" cy="50" r="40" fill="#8b5cf6"/>
    <text x="50" y="55" text-anchor="middle" font-size="24" font-weight="bold" fill="white">2</text>
    <text x="50" y="115" text-anchor="middle" font-size="14" fill="#374151">Design</text>
  </g>
  
  <!-- Arrow -->
  <path d="M 290 100 L 340 100" stroke="#cbd5e1" stroke-width="3"/>
  
  <!-- Step 3 -->
  <g transform="translate(350, 100)">
    <circle cx="50" cy="50" r="40" fill="#ec4899"/>
    <text x="50" y="55" text-anchor="middle" font-size="24" font-weight="bold" fill="white">3</text>
    <text x="50" y="115" text-anchor="middle" font-size="14" fill="#374151">Build</text>
  </g>
  
  <!-- Arrowhead marker -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#cbd5e1"/>
    </marker>
  </defs>
</g>
```

## Combining All Elements Checklist

When creating complex infographics:

1. **Establish visual hierarchy**: Most important info largest/boldest
2. **Use consistent spacing**: Grid-based layouts work best
3. **Limit color palette**: 3-5 colors maximum
4. **Group related elements**: Use `<g>` tags with clear IDs
5. **Add connecting elements**: Lines, arrows, or visual flow
6. **Balance data and decoration**: Data should dominate
7. **Include clear labels**: Don't assume context
8. **Test readability**: Ensure text is legible at various sizes
