# Featured Image Creator

> Create blog featured images as SVG (2400x1260px) using illustration libraries, FontAwesome icons, and open-source SVGs. No or negligible text. Convert to PNG via rsvg-convert. Use for yoursite.com and youragency.com blog post thumbnails, social sharing images, and WordPress featured images.

- Skill: `wpgaurav/featured-image-creator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wpgaurav/featured-image-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wpgaurav/featured-image-creator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: wpgaurav (https://skillmd.com/u/wpgaurav)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wpgaurav/featured-image-creator

---


# Featured Image Creator

Create blog featured images as clean SVG graphics at 2400x1260px. Illustrations and icons tell the story, not text. Output is converted to PNG via `rsvg-convert` for WordPress.

## Specs

| Attribute | Value |
|-----------|-------|
| Dimensions | `viewBox="0 0 2400 1260"` |
| Aspect ratio | ~1.9:1 (close to 16:9) |
| Text | None or negligible (title overlay not needed) |
| Visuals | Illustration libraries (primary) + FontAwesome icons (accent) |
| Output | `.svg` file, converted to `.png` via rsvg-convert |
| Target PNG | 2400x1260px exact via `rsvg-convert -w 2400 -h 1260` |

## Conversion Command

```bash
for f in *.svg; do rsvg-convert -f png -w 2400 -h 1260 -o "${f%.svg}.png" "$f"; done
```

Single file:
```bash
rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"
```

---

## Illustration Library (Primary Visual Source)

### Location

```
~/Icons/graphics-inspirations/
```

### Available Collections

| Collection | Folder | SVGs | Best For |
|-----------|--------|------|----------|
| Freelance & Remote Work | `Freelance-Vector-Illustrations/SVG/Expanded/Titled/` | 361 | Freelancing, remote work, agency life |
| Software Developer | `Software-Developer-Illustrations/SVG/Expanded/Titled/` | 201 | Coding, debugging, dev workflows |
| Work & Office | `7c89bfb8-*-Work-Illustrations/SVG/Expanded/Titled/` | 201 | Planning, burnout, office scenarios |
| Job Professions | `Job-Illustrations-Art-Set/SVG/Expanded/Titled/` | 201 | Career roles, professional services |
| Ecommerce | `Ecommerce-Illustrations/SVG/Expanded/Titled/` | 201 | Shopping, pricing, products, billing |
| AI & Robotics | `971d5aad-*-Artificial-Intelligence-*/SVG/Expanded/Titled/` | 301 | AI, automation, robots, futuristic |
| Workaholics | `Workaholics-Characters-*/SVG/Expanded/Titled/` | 401 | Work stress, deadlines, hustle |
| Advertising | `Advertising Illustration/SVG/Expanded/` | 25 | Marketing, ads (numbered 1–25) |
| Colorful Life | `Colorful-Life-Collection/` (6 subcategories) | 1126 | Celebration, health, travel, education |
| IoT & Smart Devices | `IOT-Illustrations/SVG/Expanded/Titled/` | 201 | Smart tech, automation, devices |
| Lifestyle | `Lifestyle-Illustrations/SVG/Expanded/Titled/` | 361 | Daily activities, hobbies |
| Shopping & Grocery | `Shopping-Grocery-Illustrations/SVG/Expanded/Titled/` | 301 | Retail, delivery, shopping |
| Stress & Sleep | `Stress & Sleep Illustrations Design/SVG/Expanded/Titled/` | 301 | Mental health, wellness |
| Math & Education | `c0788535-*-Math-Illustrations/SVG/Expanded/Titled/` | 261 | Math, education, tutoring |
| Reeded Glass | `e6ceb468-*-reeded_glass/` | 20 | Glassmorphism UI elements |
| WordPress | `wpbeginner/` | 5 | WordPress-specific scenes |

### How to Use Illustrations

Illustrations are full SVG files with embedded `<style>` blocks using CSS classes (`.st0`, `.st1`, etc.) for colors. They have their own viewBoxes (commonly `0 0 156 156` or `0 0 600 600`).

**Embed using nested `<svg>` element** to preserve the illustration's style scope:

```svg
<!-- Read the illustration file, strip the XML declaration and outer <svg> opening/closing -->
<!-- Then embed as a nested SVG with positioning -->
<svg x="600" y="80" width="1200" height="1100" viewBox="0 0 156 156">
  <style type="text/css">
    .st0{fill:#F7CFC6;}
    .st1{fill:#73504E;}
    <!-- ... all style classes from the illustration -->
  </style>
  <!-- All illustration paths/groups here -->
</svg>
```

**Key embedding rules:**
1. Read the illustration SVG file completely
2. Extract everything BETWEEN `<svg ...>` and `</svg>` (the inner content including `<style>`)
3. Wrap in a new `<svg>` element with x/y/width/height for positioning on the 2400x1260 canvas
4. The nested SVG's viewBox should match the original illustration's viewBox
5. Size the illustration to occupy ~60-80% of canvas height (750-1000px height)
6. Center horizontally, position slightly above vertical center

**Illustration style notes:**
- All illustrations use flat design with vibrant, consistent color palettes
- Colors include blues (#006BFF, #3BA2FB), greens (#00C491, #02A05A), pinks (#EE5271), yellows (#FFD700), and skin tones (#F7CFC6, #FAB19D)
- Character-centric scenes with professional themes
- Well-suited as hero visuals without color modification

### Matching Illustrations to Topics

| Article Topic | Collection | Search Keywords |
|--------------|-----------|-----------------|
| Agency operations | Work-Illustrations | "Making Plan", "Employee Planning", "Organizing Files" |
| Project management | Software-Developer, Work | "Organizing Tasks", "Tracking Sales" |
| Proposals/contracts | Work-Illustrations | "Proofreading", "Discussion" |
| Developer rates | Job-Illustrations, Freelance | "Freelance Worker", "Freelancer" |
| Maintenance business | Software-Developer | "Debugging", "Server Configuration" |
| Pricing/billing | Ecommerce | "Sale Offer", "Bill Receipt", "Checkout" |
| Sales/pitching | Freelance, Advertising | "Brainstorming", "Video Call", "Presentation" |
| Productized services | Ecommerce | "Add to Cart", "Online Shopping", "Online Store" |
| AI services | AI-Illustrations | "AI Analyst", "AI Research", "Robot Assistant" |
| White-label | Software-Developer | "Frontend Developer", "Reviewing Code" |
| Partnerships | Work-Illustrations | "Work Buddy", "Online Chat" |
| Freelancer growth | Freelance | "Freelancer", "Remote Employment" |
| Plugin development | Software-Developer | "Coding Files", "Feature Branch", "Programming" |
| Product business | Ecommerce | "Online Order", "Online Sale" |
| SaaS ideas | Software-Developer, AI | "App Testing", "Storage Setting", "Virtual Assistant" |

---

## FontAwesome Icons (Local)

### Location

```
~/Downloads/fontawesome-pro-6.4.2-desktop/svgs/
```

### Categories

| Category | Path | Count | Use For |
|----------|------|-------|---------|
| Solid | `solid/` | 1,390 | Primary icons, filled style |
| Regular | `regular/` | 163 | Outline style, lighter feel |
| Brands | `brands/` | 492 | WordPress, YouTube, GitHub, etc. |

### How to Use FontAwesome Icons

1. **Read the SVG file** to get the path data
2. **Extract the `<path d="...">` and `viewBox`** from the file
3. **Embed inline** in your SVG using a `<g>` with transform for positioning and scaling

```svg
<!-- Example: embedding a FontAwesome icon -->
<g transform="translate(500, 400) scale(0.15)">
  <!-- Paste the path data from the .svg file -->
  <path d="M0 64C0 28.7 28.7 0 64 0L352..." fill="#2563eb"/>
</g>
```

### Scaling Math

FontAwesome icons use large viewBoxes (typically `0 0 512 512` or `0 0 640 512`). To get them to a target pixel size in the 2400x1260 canvas:

| Target Size | Scale Factor (512 viewBox) | Scale Factor (640 viewBox) |
|-------------|---------------------------|---------------------------|
| 40px | 0.078 | 0.0625 |
| 60px | 0.117 | 0.094 |
| 80px | 0.156 | 0.125 |
| 100px | 0.195 | 0.156 |
| 120px | 0.234 | 0.188 |
| 150px | 0.293 | 0.234 |
| 200px | 0.39 | 0.313 |
| 250px | 0.488 | 0.39 |
| 300px | 0.586 | 0.469 |

**Formula**: `scale = target_size / icon_viewbox_width`

### Common Icons by Topic

| Blog Topic | Solid Icons to Use |
|------------|-------------------|
| Blogging / Writing | `pen-to-square`, `blog`, `pencil`, `keyboard`, `newspaper` |
| Money / Income | `dollar-sign`, `money-bill`, `coins`, `piggy-bank`, `wallet`, `chart-line` |
| WordPress | `brands/wordpress`, `brands/wordpress-simple` |
| Hosting / Server | `server`, `database`, `hard-drive`, `cloud` |
| SEO | `magnifying-glass`, `chart-simple`, `ranking-star`, `arrow-trend-up` |
| Email | `envelope`, `paper-plane`, `at`, `inbox` |
| Social Media | `brands/twitter`, `brands/youtube`, `brands/instagram`, `brands/linkedin` |
| Education / Students | `graduation-cap`, `book`, `book-open`, `school`, `chalkboard-user` |
| Tools | `screwdriver-wrench`, `gear`, `gears`, `toolbox`, `wand-magic-sparkles` |
| Speed / Performance | `bolt`, `gauge-high`, `rocket`, `stopwatch` |
| Security | `shield-halved`, `lock`, `key`, `user-shield` |
| Shopping / Affiliate | `cart-shopping`, `bag-shopping`, `tags`, `receipt` |
| Design | `palette`, `paintbrush`, `swatchbook`, `pen-ruler` |
| Code / Dev | `code`, `terminal`, `bug`, `laptop-code`, `file-code` |
| AI / Automation | `robot`, `microchip`, `brain`, `wand-magic-sparkles` |
| Analytics | `chart-bar`, `chart-pie`, `chart-line`, `chart-area` |
| Communication | `comments`, `message`, `bullhorn`, `phone` |
| Media | `image`, `camera`, `video`, `photo-film` |
| Growth | `arrow-up`, `arrow-trend-up`, `seedling`, `leaf` |
| Invoicing / Finance | `file-invoice-dollar`, `receipt`, `credit-card`, `calculator`, `money-bill-wave` |
| Time / Productivity | `clock`, `stopwatch`, `hourglass-half`, `gauge-high`, `list-check` |

### Open-Source SVG Icons (Online)

When FontAwesome doesn't have what you need, use inline SVG paths from:

- **Heroicons** (MIT): Simple, clean outlines or solid fills
- **Lucide** (ISC): Fork of Feather Icons, consistent 24x24 grid
- **Simple Icons** (CC0): Brand/company logos
- **Tabler Icons** (MIT): 2px stroke, rounded caps

Embed the same way: extract `<path>` data, embed in `<g>` with transform.

---

## Visual Styles

Pick one style per image based on article type. Do not mix styles.

### Style 1: Floating Icons (Default)

Best for: Most blog articles, how-to guides, educational content.

Clean background gradient with 4-8 icons floating at different sizes, slight rotations, and varying opacities. The icons tell the story of the article topic.

**Background**: Subtle gradient (warm or cool), dot grid pattern for texture.
**Icons**: Mixed sizes (60px to 250px), scattered composition, slight rotations (-15 to +15 degrees), varying opacity (0.4 to 1.0 for depth).
**Accents**: Soft colored blobs behind icon clusters, decorative rings, thin connecting lines optional.

**Depth techniques (REQUIRED for standout quality):**
- Use 3 distinct depth layers: foreground (opacity 0.9-1.0, scale large), midground (0.6-0.8, scale medium), background (0.3-0.5, scale small)
- Background-layer icons should use a **blur filter** (`feGaussianBlur stdDeviation="3"`) to simulate depth of field
- Foreground icons should have a **drop shadow** for elevation
- Add 1-2 **decorative rings** (unfilled circles with thin stroke) behind the hero icon cluster for visual interest
- Place **accent dots** (3-6px circles at 0.1-0.2 opacity) scattered between icons

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f9ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="6" stdDeviation="12" flood-opacity="0.1"/>
    </filter>
    <filter id="bgBlur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
    <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="15" cy="15" r="1.5" fill="#94a3b8" opacity="0.15"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>

  <!-- Accent blobs (soft, organic shapes) -->
  <ellipse cx="650" cy="450" rx="320" ry="260" fill="#dbeafe" opacity="0.35"/>
  <ellipse cx="1800" cy="800" rx="280" ry="220" fill="#c7d2fe" opacity="0.25"/>

  <!-- Decorative rings (behind hero icon) -->
  <circle cx="1100" cy="550" r="220" fill="none" stroke="#93c5fd" stroke-width="1.5" opacity="0.2"/>
  <circle cx="1100" cy="550" r="320" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.1"/>

  <!-- Accent dots scattered for texture -->
  <circle cx="380" cy="200" r="4" fill="#3b82f6" opacity="0.15"/>
  <circle cx="1900" cy="180" r="5" fill="#6366f1" opacity="0.12"/>
  <circle cx="2100" cy="900" r="6" fill="#3b82f6" opacity="0.1"/>
  <circle cx="300" cy="1000" r="4" fill="#8b5cf6" opacity="0.12"/>
  <circle cx="1500" cy="150" r="3" fill="#6366f1" opacity="0.15"/>

  <!-- BACKGROUND LAYER: small, blurred, low opacity -->
  <g filter="url(#bgBlur)">
    <g transform="translate(200, 180) scale(0.1) rotate(-8)" opacity="0.35">
      <path d="..." fill="#8b5cf6"/>
    </g>
    <g transform="translate(2050, 950) scale(0.1) rotate(10)" opacity="0.3">
      <path d="..." fill="#a78bfa"/>
    </g>
  </g>

  <!-- MIDGROUND LAYER: medium, partial opacity -->
  <g filter="url(#shadow)">
    <g transform="translate(500, 350) scale(0.22) rotate(8)" opacity="0.7">
      <path d="..." fill="#3b82f6"/>
    </g>
    <g transform="translate(1750, 350) scale(0.2) rotate(-10)" opacity="0.65">
      <path d="..." fill="#6366f1"/>
    </g>
    <g transform="translate(450, 750) scale(0.23) rotate(-10)" opacity="0.75">
      <path d="..." fill="#2563eb"/>
    </g>
  </g>

  <!-- FOREGROUND LAYER: hero, large, high opacity, strong shadow -->
  <g filter="url(#shadow)">
    <g transform="translate(1050, 500) scale(0.45) rotate(-5)" opacity="0.95">
      <path d="..." fill="#2563eb"/>
    </g>
    <g transform="translate(1850, 630) scale(0.2) rotate(6)" opacity="0.85">
      <path d="..." fill="#6366f1"/>
    </g>
  </g>
</svg>
```

**Composition rules for floating icons:**
- 1 large hero icon (180-250px) placed slightly off-center (rule of thirds)
- 2-3 midground icons (80-120px) distributed around
- 2-3 background icons (40-70px) filling gaps, lower opacity, slight blur
- Minimum 80px padding from canvas edges
- Vary rotation between -15 and +15 degrees
- Use 2-3 colors from the same palette, never rainbow
- Add decorative rings behind hero icon for visual depth
- Scatter 4-6 accent dots between icon clusters

### Style 2: Icon Cards on Grid

Best for: Tool comparisons, plugin roundups, structured content.

Icons sit inside white card containers arranged on a visible dot grid. Connected by dashed lines. Feels organized and structured like a diagram.

**Background**: Light neutral with visible dot grid.
**Icons**: Inside white rounded-rect cards (120x120px), consistent sizes (60-80px), arranged in a balanced grid-like pattern.
**Accents**: Thin dashed lines connecting cards, subtle drop shadows on cards, one card highlighted with colored border.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fafbfc"/>
      <stop offset="100%" stop-color="#f1f5f9"/>
    </linearGradient>
    <filter id="card-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="12" flood-opacity="0.06"/>
    </filter>
    <filter id="hero-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-opacity="0.12"/>
    </filter>
    <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
      <circle cx="30" cy="30" r="1.5" fill="#cbd5e1" opacity="0.25"/>
    </pattern>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#grid)"/>

  <!-- Connecting lines between cards (dashed) -->
  <line x1="520" y1="400" x2="780" y2="400" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>
  <line x1="920" y1="400" x2="1180" y2="400" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>

  <!-- Regular cards -->
  <g filter="url(#card-shadow)" transform="translate(400, 340)">
    <rect x="-60" y="-60" width="120" height="120" rx="16" fill="#fff"/>
    <g transform="scale(0.15) translate(-256, -256)">
      <path d="..." fill="#64748b"/>
    </g>
  </g>

  <!-- Hero card (highlighted, slightly larger, colored border) -->
  <g filter="url(#hero-shadow)" transform="translate(800, 340)">
    <rect x="-72" y="-72" width="144" height="144" rx="20" fill="#fff" stroke="#3b82f6" stroke-width="3"/>
    <g transform="scale(0.18) translate(-256, -256)">
      <path d="..." fill="#2563eb"/>
    </g>
  </g>

  <!-- More regular cards... -->
</svg>
```

**Composition rules for icon cards:**
- 5-7 cards in a loose grid (NOT perfectly aligned, slight organic drift)
- One card is the "hero" card: 20% larger, colored border, stronger shadow
- Cards connected by dashed lines to show relationships
- Use the Slate Neutral palette for cards, accent color only on hero card
- Stagger rows slightly for visual interest (not a rigid grid)

### Style 3: Bold Gradient + Central Icon

Best for: Single-topic articles, reviews, opinion pieces, newsletter headers.

A rich gradient background with one large central icon (or a tight cluster of 2-3). Minimal, impactful, bold.

**Background**: Strong multi-point gradient, no grid.
**Icons**: 1 large icon (280-350px) centered, or 2-3 tightly grouped. White or near-white fill.
**Accents**: Glow effect behind central icon, concentric rings, subtle radial gradient, corner geometric shapes.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1e3a5f"/>
      <stop offset="40%" stop-color="#1e40af"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="35%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
    </radialGradient>
    <filter id="icon-glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"/>
      <feBlend in="SourceGraphic" in2="blur" mode="normal"/>
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#glow)"/>

  <!-- Concentric rings -->
  <circle cx="1200" cy="630" r="250" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.08"/>
  <circle cx="1200" cy="630" r="350" fill="none" stroke="#fff" stroke-width="1" opacity="0.05"/>
  <circle cx="1200" cy="630" r="450" fill="none" stroke="#fff" stroke-width="0.5" opacity="0.03"/>

  <!-- Corner geometric accents -->
  <rect x="80" y="80" width="120" height="3" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="80" y="80" width="3" height="120" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="2200" y="1080" width="120" height="3" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="2317" y="960" width="3" height="120" rx="1.5" fill="#fff" opacity="0.1"/>

  <!-- Central icon (large, white, with glow) -->
  <g transform="translate(1200, 630) scale(0.6)" filter="url(#icon-glow)">
    <g transform="translate(-256, -256)">
      <path d="..." fill="#fff"/>
    </g>
  </g>

  <!-- Small supporting icon (subtle) -->
  <g transform="translate(700, 400) scale(0.15)" opacity="0.2">
    <path d="..." fill="#93c5fd"/>
  </g>
</svg>
```

### Style 4: Glassmorphism Float (NEW)

Best for: SaaS reviews, modern web tools, premium content.

Icons float on frosted glass cards over a gradient background. Premium, modern feel. Each icon sits on a semi-transparent card with backdrop blur simulation.

**Background**: Rich gradient (dark or vibrant).
**Icons**: Inside glassmorphic containers (white at 0.08-0.12 opacity, white border at 0.15 opacity, rounded corners).
**Accents**: Gradient orbs behind glass cards, scattered light sparkles.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="50%" stop-color="#1e293b"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </linearGradient>
    <filter id="glow-orb">
      <feGaussianBlur stdDeviation="40"/>
    </filter>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000" flood-opacity="0.2"/>
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>

  <!-- Glowing orbs behind cards -->
  <circle cx="500" cy="400" r="200" fill="#3b82f6" opacity="0.15" filter="url(#glow-orb)"/>
  <circle cx="1900" cy="800" r="180" fill="#8b5cf6" opacity="0.12" filter="url(#glow-orb)"/>
  <circle cx="1200" cy="600" r="250" fill="#06b6d4" opacity="0.08" filter="url(#glow-orb)"/>

  <!-- Glass card with icon -->
  <g filter="url(#card-shadow)" transform="translate(1100, 500)">
    <!-- Glass background -->
    <rect x="-80" y="-80" width="160" height="160" rx="24"
          fill="#fff" fill-opacity="0.08"
          stroke="#fff" stroke-opacity="0.15" stroke-width="1"/>
    <!-- Icon inside -->
    <g transform="scale(0.18) translate(-256, -256)">
      <path d="..." fill="#e2e8f0"/>
    </g>
  </g>

  <!-- More glass cards at various positions... -->

  <!-- Light sparkles (tiny bright dots) -->
  <circle cx="800" cy="300" r="2" fill="#fff" opacity="0.4"/>
  <circle cx="1600" cy="200" r="1.5" fill="#fff" opacity="0.3"/>
  <circle cx="2000" cy="500" r="2" fill="#fff" opacity="0.35"/>
</svg>
```

**Composition rules for glassmorphism:**
- 4-6 glass cards of varying sizes (100px to 200px containers)
- One hero card is 40% larger than others
- Cards overlap slightly at edges for depth
- 2-3 colored orbs behind cards create the glow bleed effect
- Scatter 5-8 tiny sparkle dots (1.5-3px, white, 0.2-0.5 opacity)
- Use slate white icons (#e2e8f0) for consistency on dark backgrounds

### Style 5: Illustration Hero (PREFERRED)

Best for: Any article where a matching illustration exists. This is the highest-quality style.

A full illustration from the library serves as the hero visual, positioned on a gradient background with subtle accent elements. The illustration tells the story; FA icons are optional accents only.

**Background**: Soft gradient matching illustration mood + subtle dot grid.
**Hero**: Full illustration (60-80% canvas height), centered or rule-of-thirds positioned.
**Accents**: 2-3 soft blobs behind illustration, optional 1-2 small FA icons as floating accents at very low opacity, decorative rings.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f9ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-opacity="0.08"/>
    </filter>
    <pattern id="dots" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="1" fill="#94a3b8" opacity="0.12"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>

  <!-- Accent blobs (behind illustration) -->
  <ellipse cx="1200" cy="600" rx="500" ry="400" fill="#dbeafe" opacity="0.3"/>
  <ellipse cx="800" cy="700" rx="300" ry="250" fill="#c7d2fe" opacity="0.2"/>

  <!-- Decorative rings -->
  <circle cx="1200" cy="630" r="500" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.1"/>

  <!-- ILLUSTRATION (nested SVG preserves its own styles) -->
  <g filter="url(#shadow)">
    <svg x="600" y="80" width="1200" height="1100" viewBox="0 0 156 156">
      <style type="text/css">
        .st0{fill:#F7CFC6;}
        .st1{fill:#73504E;}
        <!-- ... illustration styles ... -->
      </style>
      <!-- ... illustration paths ... -->
    </svg>
  </g>

  <!-- Optional: 1-2 tiny FA icon accents (very subtle) -->
  <g transform="translate(300, 200) scale(0.12)" opacity="0.15">
    <path d="..." fill="#3b82f6"/>
  </g>

  <!-- Accent dots -->
  <circle cx="400" cy="300" r="4" fill="#3b82f6" opacity="0.12"/>
  <circle cx="2000" cy="900" r="5" fill="#6366f1" opacity="0.1"/>
</svg>
```

**Composition rules for illustration hero:**
- Illustration occupies 60-80% of canvas height (750-1000px)
- Center the illustration horizontally on the canvas
- Position illustration slightly above vertical center (y offset ~80-130px from top)
- Background gradient should complement the illustration's color palette
- Accent blobs should be BEHIND the illustration, large and soft
- FA icon accents are OPTIONAL and should be at 0.1-0.2 opacity max
- Keep accent dots and decorative elements subtle — the illustration is the star
- Apply a light drop shadow to the illustration group for elevation

**How to embed an illustration:**
1. Read the full illustration SVG file
2. Extract the `viewBox` value from the source SVG
3. Extract the inner content (everything between `<svg>` and `</svg>`, including `<style>` blocks)
4. Wrap in a new `<svg x="..." y="..." width="..." height="..." viewBox="...">` element
5. Place inside a `<g filter="url(#shadow)">` for elevation
6. Size: for a 156x156 viewBox illustration, use `width="1100" height="1100"` and center with `x="650" y="80"`
7. For 600x600 viewBox illustrations, use `width="1100" height="1100"` and center with `x="650" y="80"`

**Illustration viewBox sizing reference:**

| Source viewBox | Recommended width/height | x position (centered) | y position |
|---------------|-------------------------|----------------------|------------|
| 0 0 156 156 | 1100 x 1100 | 650 | 80 |
| 0 0 600 600 | 1100 x 1100 | 650 | 80 |
| 0 0 500 500 | 1100 x 1100 | 650 | 80 |

---

## Color Palettes

Pick one palette per image. Match to article mood.

### Cool Blue (Default for tech/WordPress)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Ice blue | `#f0f9ff` |
| Background end | Light blue | `#e0f2fe` |
| Primary icon | Blue | `#2563eb` |
| Secondary icon | Indigo | `#6366f1` |
| Tertiary icon | Violet | `#8b5cf6` |
| Accent blob | Blue wash | `#dbeafe` |
| Decorative ring | Light blue | `#93c5fd` |
| Grid dots | Slate | `#94a3b8` |

### Warm Amber (Money, business, affiliate)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Warm cream | `#fffbeb` |
| Background end | Amber tint | `#fef3c7` |
| Primary icon | Amber | `#d97706` |
| Secondary icon | Orange | `#ea580c` |
| Tertiary icon | Rose | `#e11d48` |
| Accent blob | Amber wash | `#fde68a` |
| Decorative ring | Peach | `#fdba74` |
| Grid dots | Stone | `#a8a29e` |

### Fresh Green (Growth, blogging, beginner guides)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Mint | `#f0fdf4` |
| Background end | Green tint | `#dcfce7` |
| Primary icon | Green | `#16a34a` |
| Secondary icon | Teal | `#0d9488` |
| Tertiary icon | Emerald | `#059669` |
| Accent blob | Green wash | `#bbf7d0` |
| Decorative ring | Light green | `#86efac` |
| Grid dots | Gray-green | `#86efac` |

### Deep Dark (Bold reviews, opinion pieces)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Dark navy | `#0f172a` |
| Background mid | Dark blue | `#1e293b` |
| Icon color | White | `#ffffff` |
| Secondary icon | Light slate | `#e2e8f0` |
| Accent orbs | Blue/violet/cyan at low opacity | `#3b82f6` / `#8b5cf6` / `#06b6d4` |
| Sparkles | White at 0.3-0.5 | `#ffffff` |
| Geometric accents | White at 0.05-0.1 | `#ffffff` |

### Slate Neutral (Comparisons, lists, roundups)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Near white | `#fafbfc` |
| Background end | Light slate | `#f1f5f9` |
| Primary icon | Slate | `#475569` |
| Secondary icon | Blue-gray | `#64748b` |
| Accent | Blue pop | `#3b82f6` |
| Card background | White | `#ffffff` |
| Card border (hero) | Blue | `#3b82f6` |

---

## Composition Rules

### Canvas Layout

```
+--80px padding--+------------------------------------------+--80px padding--+
|                 |                                          |                 |
|  80px           |         SAFE AREA (2240 x 1100)          |           80px  |
|  padding        |                                          |  padding        |
|                 |                                          |                 |
+--80px padding--+------------------------------------------+--80px padding--+
```

- Keep all icons within the safe area (80px inset from edges)
- Social sharing crops to ~1.91:1 (Facebook) or 2:1 (Twitter). Critical content should be centered
- WordPress thumbnails crop to various ratios. Center the visual weight

### Hierarchy (3-Layer Depth System)

Every image MUST use 3 depth layers for visual richness:

1. **Foreground** (closest to viewer)
   - The hero icon (largest, 180-300px)
   - 1-2 supporting icons at high opacity (0.85-1.0)
   - Drop shadow filter applied
   - Slight rotation for dynamism

2. **Midground** (middle distance)
   - 2-3 medium icons (80-120px)
   - Medium opacity (0.6-0.8)
   - Light shadow or no shadow
   - Moderate rotation

3. **Background** (furthest away)
   - 2-3 small icons (40-70px)
   - Low opacity (0.3-0.5)
   - Apply blur filter (`feGaussianBlur stdDeviation="2-4"`)
   - Creates atmospheric depth

### Decorative Elements (REQUIRED)

Every image must include at least 3 of these:

- **Accent blobs**: Soft ellipses (200-350px radius) at 0.2-0.4 opacity in palette-matching colors
- **Decorative rings**: 1-2 unfilled circles (200-350px radius) with thin stroke (1-2px) at 0.08-0.2 opacity centered behind hero icon
- **Accent dots**: 4-8 small circles (2-6px) scattered across canvas at 0.1-0.2 opacity
- **Dot grid pattern**: Light repeating dot pattern for texture
- **Corner accents**: Thin L-shaped lines in corners (Style 3 and 4 only)
- **Sparkles**: Tiny bright dots for glassmorphism style

### Spacing

- Minimum 80px between icon edges
- Hero icon should have 180px+ clear space around it (except for decorative rings)
- Supporting icons distribute evenly but not symmetrically
- Background icons can be partially clipped by safe area edges for depth

### What NOT to Do

- No text (article title goes in WordPress, not the image)
- No photographs or raster images embedded in SVG
- No more than 8 icons total (gets cluttered)
- No rainbow colors. Stick to one palette (2-3 hues)
- No perfect symmetry (feels lifeless)
- No tiny icons that disappear at thumbnail size
- No clip art aesthetic
- No decorative borders or frames
- No flat compositions without depth layers
- No icons all the same size (kills visual hierarchy)
- No icons all at the same opacity (kills depth)

---

## Execution Steps

1. **Read the article** (or article outline) to understand the core topic
2. **Pick a visual style**: Floating Icons (default), Icon Cards, Bold Gradient, or Glassmorphism Float
3. **Pick a color palette**: Match to article mood/category
4. **Select 5-8 icons** from FontAwesome that represent the topic
   - Read each `.svg` file from the local FontAwesome directory
   - Extract the `viewBox` and `<path d="...">` data
   - Note the viewBox dimensions for scaling math
5. **Build the SVG**:
   a. Set `viewBox="0 0 2400 1260"`
   b. Define gradients, filters (shadow, blur, glow), and patterns in `<defs>`
   c. Create background (gradient + pattern)
   d. Add accent shapes (blobs, rings, dots)
   e. Place BACKGROUND layer icons (small, blurred, low opacity)
   f. Place MIDGROUND layer icons (medium, moderate opacity)
   g. Place FOREGROUND layer icons (hero + supporting, high opacity, shadow)
   h. Add final decorative touches (sparkles, corner accents)
6. **Review**: Does it read well at 300px wide (thumbnail)? Is the topic obvious from icons alone? Is there clear visual depth?
7. **Save** as `.svg` file
8. **Convert**: `rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"`

---

## Matching Style to Article Type

**PREFERRED**: Always check the Illustration Library first. If a matching illustration exists, use **Style 5: Illustration Hero**. Fall back to icon-only styles when no good illustration match is available.

| Article Type | Preferred Style | Fallback Style | Recommended Palette |
|-------------|----------------|----------------|---------------------|
| How-to guide | Illustration Hero | Floating Icons | Cool Blue |
| Tutorial | Illustration Hero | Icon Cards on Grid | Cool Blue or Neutral |
| Money/affiliate | Illustration Hero | Floating Icons | Warm Amber |
| Beginner guide | Illustration Hero | Floating Icons | Fresh Green |
| WordPress tutorial | Illustration Hero | Floating Icons or Icon Cards | Cool Blue |
| Software review | Illustration Hero | Bold Gradient or Glassmorphism | Deep Dark |
| Product review | Illustration Hero | Glassmorphism Float | Deep Dark |
| Comparison/roundup | Illustration Hero | Icon Cards on Grid | Slate Neutral |
| Opinion/thought leadership | Illustration Hero | Bold Gradient | Deep Dark |
| Agency/business | Illustration Hero | Floating Icons | Cool Blue or Amber |
| Freelancing | Illustration Hero | Floating Icons | Warm Amber |
| AI/automation | Illustration Hero | Glassmorphism Float | Deep Dark |
| Newsletter header | Illustration Hero | Floating Icons | Any |
| Tool recommendation | Illustration Hero | Floating Icons | Warm Amber |
| Student/education | Illustration Hero | Floating Icons | Fresh Green |
| SaaS/web app | Illustration Hero | Glassmorphism Float | Deep Dark |
| Invoice/finance | Illustration Hero | Floating Icons | Warm Amber |
| Time/productivity | Illustration Hero | Floating Icons | Cool Blue |

---

## rsvg-convert Notes

- For exact 2400x1260 PNG: `rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"`
- For batch conversion: `for f in *.svg; do rsvg-convert -f png -w 2400 -h 1260 -o "${f%.svg}.png" "$f"; done`
- Install on macOS: `brew install librsvg`
- If only `-w` is specified, height scales proportionally from viewBox

---

## Mobile-Friendly Rules

Featured images display at various sizes across devices:

1. **viewBox is mandatory** — `viewBox="0 0 2400 1260"`, never fixed pixel dimensions.
2. **Center visual weight**: Social crops (1.91:1 Facebook, 2:1 Twitter) and WordPress thumbnails all crop from center. Keep the hero icon cluster centered.
3. **Test at 300px wide**: The image must be recognizable and the topic obvious at thumbnail size. This is the mobile card/feed width.
4. **Minimum icon rendered size**: The hero icon must remain identifiable at ~60px rendered width. Background icons can fade.
5. **No tiny decorative elements** that vanish at small sizes — accent dots under 4px at viewBox scale disappear on mobile.
6. **Responsive embed**: WordPress handles this, but for custom use: `width="100%" height="auto"`.

## Quality Checklist

- [ ] viewBox is `0 0 2400 1260`
- [ ] No text or negligible text (title NOT baked into image)
- [ ] Icons are from FontAwesome (local) or open-source (inline paths)
- [ ] No `<image>` tags or external references (fully self-contained SVG)
- [ ] 5-8 icons total, clear visual hierarchy
- [ ] One color palette used consistently (2-3 hues max)
- [ ] Icons stay within safe area (80px from edges)
- [ ] **3 depth layers present** (foreground, midground, background)
- [ ] Background layer icons have blur filter applied
- [ ] Foreground icons have drop shadow
- [ ] At least 3 decorative elements (blobs, rings, dots, sparkles)
- [ ] Reads well at thumbnail size (~300px wide)
- [ ] Topic is recognizable from icons alone
- [ ] Background has gradient (not flat white)
- [ ] rsvg-convert produces clean PNG without artifacts
- [ ] File size is reasonable (under 100KB for SVG)