featured-image-creator

name	featured-image-creator
description	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.

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

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

Single file:

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

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:

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

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

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