# Marketing Graphics Patterns

Patterns for creating marketing graphics, promotional materials, hero sections, and branded visuals with bold typography.

## Bold Typography Graphics

### Year in Review Style (Large Numbers)

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
  <defs>
    <!-- Gradient for accent numbers -->
    <linearGradient id="warmGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f472b6"/>
      <stop offset="50%" stop-color="#fb923c"/>
      <stop offset="100%" stop-color="#facc15"/>
    </linearGradient>
    
    <!-- Line pattern for main numbers -->
    <pattern id="linePattern" width="4" height="4" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="4" y2="0" stroke="#6366f1" stroke-width="1"/>
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect width="800" height="800" fill="#f8fafc"/>
  
  <!-- Headline -->
  <text x="100" y="100" font-size="32" font-weight="400" fill="#6366f1">
    Atlas startups
  </text>
  
  <!-- Large year numbers - primary -->
  <text x="60" y="320" font-size="280" font-weight="800" fill="#6366f1">20</text>
  <text x="60" y="560" font-size="280" font-weight="800" fill="#6366f1">25</text>
  
  <!-- Stripe logo positioned in numbers -->
  <text x="80" y="420" font-size="28" fill="#6366f1">stripe</text>
  
  <!-- Ghost/shadow numbers (gradient) -->
  <text x="280" y="320" font-size="280" font-weight="800" fill="url(#warmGradient)" opacity="0.6">20</text>
  <text x="280" y="560" font-size="280" font-weight="800" fill="url(#warmGradient)" opacity="0.4">25</text>
  
  <!-- Subheadline -->
  <text x="100" y="720" font-size="40" font-weight="400" fill="#6366f1">
    Year in review
  </text>
</svg>
```

### Hero Section with Tagline

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600">
  <defs>
    <linearGradient id="heroGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#e0e7ff"/>
      <stop offset="50%" stop-color="#fae8ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
  </defs>
  
  <!-- Gradient background -->
  <rect width="1200" height="600" fill="url(#heroGradient)"/>
  
  <!-- Main headline -->
  <text x="600" y="320" text-anchor="middle" font-size="72" font-weight="700" fill="#0f172a">
    Help that's <tspan fill="#3b82f6">made for you</tspan>
  </text>
  
  <!-- Subtitle -->
  <text x="600" y="380" text-anchor="middle" font-size="24" fill="#64748b">
    Personalized assistance powered by AI
  </text>
</svg>
```

## Floating Elements Pattern

### App Icons Cloud

```svg
<g id="floating-icons">
  <!-- Central person/avatar -->
  <circle cx="400" cy="300" r="80" fill="#fef3c7"/>
  <ellipse cx="400" cy="280" rx="35" ry="40" fill="#d4a574"/>
  <rect x="360" y="320" width="80" height="60" rx="8" fill="white"/>
  
  <!-- Floating app icons (positioned around center) -->
  <!-- Gmail icon -->
  <g transform="translate(280, 180)">
    <rect x="0" y="0" width="60" height="60" rx="16" fill="white" filter="url(#icon-shadow)"/>
    <text x="30" y="38" text-anchor="middle" font-size="24" fill="#ea4335">M</text>
  </g>
  
  <!-- Google icon -->
  <g transform="translate(500, 200)">
    <rect x="0" y="0" width="70" height="70" rx="18" fill="white" filter="url(#icon-shadow)"/>
    <text x="35" y="48" text-anchor="middle" font-size="36" font-weight="bold">
      <tspan fill="#4285f4">G</tspan>
    </text>
  </g>
  
  <!-- YouTube icon -->
  <g transform="translate(260, 350)">
    <rect x="0" y="0" width="65" height="65" rx="16" fill="white" filter="url(#icon-shadow)"/>
    <rect x="10" y="18" width="45" height="30" rx="6" fill="#ff0000"/>
    <polygon points="27,24 27,42 40,33" fill="white"/>
  </g>
  
  <!-- Photos icon -->
  <g transform="translate(480, 380)">
    <rect x="0" y="0" width="55" height="55" rx="14" fill="white" filter="url(#icon-shadow)"/>
    <rect x="12" y="12" width="14" height="14" fill="#fbbc04"/>
    <rect x="28" y="12" width="14" height="14" fill="#ea4335"/>
    <rect x="12" y="28" width="14" height="14" fill="#4285f4"/>
    <rect x="28" y="28" width="14" height="14" fill="#34a853"/>
  </g>
</g>
```

## Prompt Chip/Suggestion Pills

```svg
<g id="prompt-chips">
  <!-- Chip 1 -->
  <g transform="translate(50, 100)">
    <rect x="0" y="0" width="380" height="44" rx="22" fill="white" filter="url(#chip-shadow)"/>
    <text x="16" y="8" font-size="18" fill="#64748b">+</text>
    <text x="38" y="28" font-size="14" fill="#374151">Recommend a documentary based on what I've been curious about</text>
    <text x="360" y="28" font-size="14" fill="#3b82f6">›</text>
  </g>
  
  <!-- Chip 2 -->
  <g transform="translate(600, 80)">
    <rect x="0" y="0" width="340" height="36" rx="18" fill="white" filter="url(#chip-shadow)"/>
    <text x="14" y="6" font-size="16" fill="#64748b">+</text>
    <text x="32" y="24" font-size="13" fill="#374151">Show me hidden gems in Chicago</text>
  </g>
  
  <!-- Chip 3 -->
  <g transform="translate(650, 450)">
    <rect x="0" y="0" width="320" height="36" rx="18" fill="white" filter="url(#chip-shadow)"/>
    <text x="14" y="6" font-size="16" fill="#64748b">+</text>
    <text x="32" y="24" font-size="13" fill="#374151">Suggest books based on my interests</text>
  </g>
</g>
```

## Gradient Backgrounds

### Soft Radial Gradient

```svg
<defs>
  <radialGradient id="softRadial" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#fef3c7"/>
    <stop offset="50%" stop-color="#e0f2fe"/>
    <stop offset="100%" stop-color="#f0fdf4"/>
  </radialGradient>
</defs>
<rect width="1200" height="600" fill="url(#softRadial)"/>
```

### Multi-color Edge Glow

```svg
<defs>
  <linearGradient id="edgeGlow" x1="0%" y1="50%" x2="100%" y2="50%">
    <stop offset="0%" stop-color="#c7d2fe" stop-opacity="0.8"/>
    <stop offset="20%" stop-color="transparent"/>
    <stop offset="80%" stop-color="transparent"/>
    <stop offset="100%" stop-color="#fbcfe8" stop-opacity="0.8"/>
  </linearGradient>
</defs>
```

### Stripe-style Gradient Border

```svg
<defs>
  <linearGradient id="stripeBorder" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#ff80b5"/>
    <stop offset="50%" stop-color="#9089fc"/>
    <stop offset="100%" stop-color="#80caff"/>
  </linearGradient>
</defs>
<!-- Use as border -->
<rect x="0" y="595" width="1200" height="5" fill="url(#stripeBorder)"/>
```

## Typography Treatments

### Line-textured Typography

```svg
<defs>
  <pattern id="horizontalLines" width="100%" height="3" patternUnits="userSpaceOnUse">
    <line x1="0" y1="1.5" x2="100%" y2="1.5" stroke="#6366f1" stroke-width="1"/>
  </pattern>
  
  <clipPath id="textClip">
    <text x="100" y="300" font-size="200" font-weight="900">2025</text>
  </clipPath>
</defs>

<!-- Line-filled text -->
<rect x="0" y="100" width="800" height="400" fill="url(#horizontalLines)" clip-path="url(#textClip)"/>
```

### Gradient Text

```svg
<defs>
  <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#6366f1"/>
    <stop offset="100%" stop-color="#ec4899"/>
  </linearGradient>
</defs>
<text x="100" y="200" font-size="64" font-weight="700" fill="url(#textGradient)">
  Year in Review
</text>
```

### Outlined Text

```svg
<text x="100" y="200" font-size="120" font-weight="900" 
      fill="none" stroke="#6366f1" stroke-width="2">
  2025
</text>
```

## Complete Marketing Graphic Example

### Product Announcement Card

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ede9fe"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="softShadow">
      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-opacity="0.1"/>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="800" height="600" fill="url(#bgGrad)"/>
  
  <!-- Card -->
  <rect x="100" y="100" width="600" height="400" rx="24" fill="white" filter="url(#softShadow)"/>
  
  <!-- Badge -->
  <rect x="140" y="140" width="80" height="28" rx="14" fill="#6366f1"/>
  <text x="180" y="158" text-anchor="middle" font-size="12" font-weight="600" fill="white">NEW</text>
  
  <!-- Headline -->
  <text x="140" y="220" font-size="48" font-weight="700" fill="#0f172a">Introducing</text>
  <text x="140" y="280" font-size="48" font-weight="700" fill="#6366f1">Claude 4</text>
  
  <!-- Description -->
  <text x="140" y="340" font-size="18" fill="#64748b">The most capable AI assistant yet.</text>
  <text x="140" y="365" font-size="18" fill="#64748b">Now with advanced reasoning and creativity.</text>
  
  <!-- CTA Button -->
  <rect x="140" y="410" width="160" height="48" rx="8" fill="#6366f1"/>
  <text x="220" y="440" text-anchor="middle" font-size="16" font-weight="600" fill="white">Try it now</text>
  
  <!-- Secondary link -->
  <text x="330" y="440" font-size="16" fill="#6366f1">Learn more →</text>
</svg>
```

## Color Palettes for Marketing

### Vibrant/Playful
- Primary: `#6366f1` (indigo)
- Accent 1: `#ec4899` (pink)
- Accent 2: `#f59e0b` (amber)
- Background: `#faf5ff`, `#ede9fe`

### Professional/Corporate
- Primary: `#0f172a` (slate-900)
- Accent: `#3b82f6` (blue)
- Background: `#f8fafc`

### Warm/Approachable
- Primary: `#f97316` (orange)
- Secondary: `#fbbf24` (yellow)
- Accent: `#10b981` (green)
- Background: `#fffbeb`, `#fef3c7`

## Shadows for Marketing Graphics

### Soft Card Shadow
```svg
<filter id="softCard">
  <feDropShadow dx="0" dy="8" stdDeviation="24" flood-opacity="0.12"/>
</filter>
```

### Elevated Button Shadow
```svg
<filter id="buttonShadow">
  <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.15"/>
</filter>
```

### Icon Float Shadow
```svg
<filter id="iconFloat">
  <feDropShadow dx="0" dy="12" stdDeviation="20" flood-opacity="0.08"/>
</filter>
```
