# Flat Illustration Patterns

Patterns for creating flat-style illustrations including people, objects, icons, and scenes.

## People Illustrations

### Simplified Human Figure (Standing)

Use geometric shapes: ellipse for head, rounded rectangles for body and limbs.

```svg
<g id="person-standing">
  <!-- Head -->
  <ellipse cx="100" cy="50" rx="25" ry="28" fill="#fcd5b8"/>
  
  <!-- Hair -->
  <path d="M 75 50 Q 75 25 100 22 Q 125 25 125 50" fill="#4a3728"/>
  
  <!-- Body/Torso -->
  <path d="M 75 78 L 80 180 L 120 180 L 125 78 Q 100 85 75 78" fill="#a78bfa"/>
  
  <!-- Arms -->
  <path d="M 75 85 Q 50 100 45 140" stroke="#fcd5b8" stroke-width="12" fill="none" stroke-linecap="round"/>
  <path d="M 125 85 Q 150 100 155 140" stroke="#fcd5b8" stroke-width="12" fill="none" stroke-linecap="round"/>
  
  <!-- Legs -->
  <rect x="82" y="180" width="16" height="70" rx="8" fill="#1e3a5f"/>
  <rect x="102" y="180" width="16" height="70" rx="8" fill="#1e3a5f"/>
  
  <!-- Shoes -->
  <ellipse cx="90" cy="255" rx="14" ry="8" fill="#1e293b"/>
  <ellipse cx="110" cy="255" rx="14" ry="8" fill="#1e293b"/>
</g>
```

### Sitting Figure

```svg
<g id="person-sitting">
  <!-- Head -->
  <ellipse cx="100" cy="50" rx="22" ry="25" fill="#fcd5b8"/>
  
  <!-- Hair (ponytail style) -->
  <path d="M 78 50 Q 78 28 100 25 Q 122 28 122 50" fill="#6b4c3a"/>
  <path d="M 115 35 Q 140 30 145 55" fill="#6b4c3a"/>
  
  <!-- Body/Blazer -->
  <path d="M 70 75 L 75 140 L 125 140 L 130 75 Q 100 82 70 75" fill="#c4b5fd"/>
  
  <!-- Arms -->
  <path d="M 70 80 Q 45 100 50 130" stroke="#fcd5b8" stroke-width="10" fill="none" stroke-linecap="round"/>
  <path d="M 130 80 Q 155 100 150 130" stroke="#fcd5b8" stroke-width="10" fill="none" stroke-linecap="round"/>
  
  <!-- Legs (bent for sitting) -->
  <path d="M 80 140 L 60 180 L 80 180" fill="#1e3a5f"/>
  <path d="M 120 140 L 140 180 L 120 180" fill="#1e3a5f"/>
  
  <!-- Chair -->
  <rect x="55" y="145" width="90" height="10" rx="3" fill="#86efac"/>
  <rect x="55" y="145" width="8" height="50" fill="#86efac"/>
  <rect x="137" y="145" width="8" height="50" fill="#86efac"/>
</g>
```

### Figure with Laptop

```svg
<g id="person-with-laptop">
  <!-- Person sitting (use sitting pattern above) -->
  
  <!-- Laptop -->
  <g transform="translate(40, 120)">
    <!-- Screen -->
    <rect x="0" y="0" width="60" height="40" rx="3" fill="#f9a8d4"/>
    <!-- Screen glow -->
    <rect x="4" y="4" width="52" height="32" rx="2" fill="#fce7f3"/>
    <!-- Keyboard base -->
    <rect x="-5" y="40" width="70" height="8" rx="2" fill="#d1d5db"/>
  </g>
</g>
```

## Object Illustrations

### Robotic Arm

```svg
<g id="robot-arm">
  <!-- Base -->
  <ellipse cx="100" cy="200" rx="30" ry="10" fill="#14b8a6"/>
  <rect x="85" y="180" width="30" height="20" fill="#14b8a6"/>
  
  <!-- Arm segment 1 -->
  <rect x="92" y="120" width="16" height="60" rx="4" fill="#5eead4"/>
  
  <!-- Joint -->
  <circle cx="100" cy="120" r="10" fill="#2dd4bf"/>
  
  <!-- Arm segment 2 -->
  <rect x="95" y="60" width="10" height="60" rx="3" fill="#5eead4" transform="rotate(-30 100 90)"/>
  
  <!-- End effector/pen -->
  <rect x="70" y="45" width="6" height="25" rx="2" fill="#f97316"/>
</g>
```

### Chart/Graph Panel

```svg
<g id="chart-panel">
  <!-- Panel background -->
  <rect x="0" y="0" width="180" height="120" rx="8" fill="#fdf4ff"/>
  
  <!-- Mini bar chart -->
  <rect x="20" y="70" width="20" height="30" rx="2" fill="#e879f9"/>
  <rect x="50" y="50" width="20" height="50" rx="2" fill="#e879f9"/>
  <rect x="80" y="60" width="20" height="40" rx="2" fill="#e879f9"/>
  <rect x="110" y="40" width="20" height="60" rx="2" fill="#e879f9"/>
  
  <!-- Trend line -->
  <path d="M 20 85 L 50 65 L 80 75 L 110 55 L 150 35" stroke="#c026d3" stroke-width="2" fill="none"/>
</g>
```

### Pie Chart Icon

```svg
<g id="pie-icon">
  <circle cx="50" cy="50" r="40" fill="#fce7f3"/>
  <path d="M 50 50 L 50 10 A 40 40 0 0 1 85 65 Z" fill="#f472b6"/>
  <path d="M 50 50 L 85 65 A 40 40 0 0 1 30 80 Z" fill="#c084fc"/>
</g>
```

### Settings/Gear Icon

```svg
<g id="gear-icon">
  <circle cx="50" cy="50" r="15" fill="none" stroke="#14b8a6" stroke-width="4"/>
  <g fill="#14b8a6">
    <rect x="46" y="28" width="8" height="12" rx="2"/>
    <rect x="46" y="60" width="8" height="12" rx="2"/>
    <rect x="28" y="46" width="12" height="8" rx="2"/>
    <rect x="60" y="46" width="12" height="8" rx="2"/>
    <rect x="32" y="32" width="10" height="8" rx="2" transform="rotate(45 37 36)"/>
    <rect x="58" y="58" width="10" height="8" rx="2" transform="rotate(45 63 62)"/>
    <rect x="58" y="32" width="10" height="8" rx="2" transform="rotate(-45 63 36)"/>
    <rect x="32" y="58" width="10" height="8" rx="2" transform="rotate(-45 37 62)"/>
  </g>
</g>
```

## App Icons

### Gmail Icon Style

```svg
<g id="gmail-icon">
  <rect x="10" y="20" width="80" height="60" rx="4" fill="white" stroke="#e2e8f0"/>
  <path d="M 10 25 L 50 55 L 90 25" fill="none" stroke="#ea4335" stroke-width="4"/>
  <path d="M 10 80 L 10 25 L 50 55" fill="none" stroke="#4285f4" stroke-width="4"/>
  <path d="M 90 80 L 90 25 L 50 55" fill="none" stroke="#34a853" stroke-width="4"/>
</g>
```

### YouTube Icon Style

```svg
<g id="youtube-icon">
  <rect x="5" y="15" width="90" height="70" rx="20" fill="#ff0000"/>
  <polygon points="40,30 40,70 70,50" fill="white"/>
</g>
```

### Generic App Icon

```svg
<g id="app-icon">
  <rect x="0" y="0" width="100" height="100" rx="22" fill="#3b82f6"/>
  <!-- Content varies -->
</g>
```

## Scene Composition

### Office/Workspace Scene

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <!-- Background -->
  <rect width="800" height="600" fill="#faf5ff"/>
  
  <!-- Wall panels/charts (background layer) -->
  <g transform="translate(100, 50)">
    <!-- Use chart-panel patterns -->
  </g>
  
  <!-- Desk/surface -->
  <rect x="50" y="400" width="700" height="8" fill="#e2e8f0"/>
  
  <!-- People (foreground) -->
  <g transform="translate(200, 150)">
    <!-- Use person patterns -->
  </g>
  
  <!-- Robot/Equipment -->
  <g transform="translate(450, 200)">
    <!-- Use robot-arm pattern -->
  </g>
</svg>
```

## Color Palettes for Illustrations

### Skin Tones
- Light: `#fcd5b8`, `#fde7d6`
- Medium: `#d4a574`, `#c68c5c`
- Dark: `#8b5a3c`, `#6b4226`

### Hair Colors
- Black: `#1e293b`
- Brown: `#4a3728`, `#6b4c3a`
- Blonde: `#d4a574`, `#e8c89a`

### Clothing (soft pastels work best)
- Purple/Lavender: `#a78bfa`, `#c4b5fd`
- Blue: `#93c5fd`, `#60a5fa`
- Pink: `#f9a8d4`, `#f472b6`
- Green: `#86efac`, `#4ade80`
- Navy/Dark: `#1e3a5f`, `#334155`

### Tech/Equipment
- Teal: `#14b8a6`, `#2dd4bf`, `#5eead4`
- Gray: `#d1d5db`, `#9ca3af`
- Accent: `#f97316` (orange)

## Tips for Flat Illustrations

1. **No outlines** - Use solid fills, not strokes for main shapes
2. **Simple shadows** - Use slightly darker versions of base colors, not black
3. **Overlapping shapes** - Create depth through layering, not gradients
4. **Rounded corners** - Use `rx` and `ry` on rectangles for friendly feel
5. **Limited palette** - 4-6 colors maximum per illustration
6. **Geometric simplification** - Reduce complex shapes to basic geometry
7. **Consistent proportions** - Heads slightly larger than realistic for approachability
