ILLUSTRATION GENERATOR

Describe it, get a one-off illustration.

Two styles. Abstract composes shapes, charts, and networks from six motif primitives. Character builds flat-icon corporate scenes with real clothing — a figure waving hello, presenting to a growing chart, a full boardroom presentation, a team, a handshake, a celebration, or an idea moment — with your own skin tone, masculine/feminine figure style, and outfit palette. Click either preview to make the copied SVG use that theme's real colors.

Style

Describe what this illustration is for

Auto-picked from your description: Geometric, Network, Bars. Toggle motifs below to take over manually.

Click a preview to switch the copyable code below to that theme's actual colors.

Motifs (6 primitives — click to override auto-selection)

Density

Palette

Animation

Standalone SVG — self-contained (embedded keyframes, fallback colors), paste it anywhere:

CSS

<svg viewBox="0 0 400 225" xmlns="http://www.w3.org/2000/svg">
  <style>@keyframes igFloat { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-7px); } 65% { transform: translateY(-9px); } }
@keyframes igPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.09); opacity: 0.82; } }
@keyframes igDrift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(3px, -5px) rotate(2.5deg); } 66% { transform: translate(-2px, -3px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { circle, rect, path, line { animation: none !important; } }</style>
  <rect width="400" height="225" fill="#161f2e" />
  <rect x="63.2" y="109.2" width="33.5" height="33.5" rx="4" fill="#10b981" opacity="0.85" style="animation: igFloat 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.00s; transform-box: fill-box; transform-origin: center;" />
  <circle cx="54.2" cy="131.5" r="10.6" fill="#3b82f6" opacity="0.85" style="animation: igFloat 4.1s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.35s; transform-box: fill-box; transform-origin: center;" />
  <circle cx="88.1" cy="134.0" r="12.6" fill="#10b981" opacity="0.85" style="animation: igFloat 5.0s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.70s; transform-box: fill-box; transform-origin: center;" />
  <line x1="192.3" y1="108.4" x2="244.2" y2="113.4" stroke="#10b981" stroke-width="1" opacity="0.4" />
  <circle cx="244.2" cy="113.4" r="7.7" fill="#3b82f6" style="animation: igFloat 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 1.40s; transform-box: fill-box; transform-origin: center;" />
  <line x1="192.3" y1="108.4" x2="195.5" y2="136.1" stroke="#10b981" stroke-width="1" opacity="0.4" />
  <circle cx="195.5" cy="136.1" r="6.9" fill="#10b981" style="animation: igFloat 5.0s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 2.10s; transform-box: fill-box; transform-origin: center;" />
  <line x1="192.3" y1="108.4" x2="159.7" y2="123.6" stroke="#10b981" stroke-width="1" opacity="0.4" />
  <circle cx="159.7" cy="123.6" r="5.5" fill="#10b981" style="animation: igFloat 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.70s; transform-box: fill-box; transform-origin: center;" />
  <line x1="192.3" y1="108.4" x2="142.6" y2="104.6" stroke="#10b981" stroke-width="1" opacity="0.4" />
  <circle cx="142.6" cy="104.6" r="6.1" fill="#3b82f6" style="animation: igFloat 5.0s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 1.40s; transform-box: fill-box; transform-origin: center;" />
  <line x1="192.3" y1="108.4" x2="194.6" y2="89.0" stroke="#10b981" stroke-width="1" opacity="0.4" />
  <circle cx="194.6" cy="89.0" r="5.2" fill="#10b981" style="animation: igFloat 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 2.10s; transform-box: fill-box; transform-origin: center;" />
  <line x1="192.3" y1="108.4" x2="232.5" y2="91.4" stroke="#10b981" stroke-width="1" opacity="0.4" />
  <circle cx="232.5" cy="91.4" r="5.5" fill="#10b981" style="animation: igFloat 5.0s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.70s; transform-box: fill-box; transform-origin: center;" />
  <circle cx="192.3" cy="108.4" r="7.0" fill="#3b82f6" style="animation: igFloat 5.9s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 1.05s; transform-box: fill-box; transform-origin: center;" />
  <rect x="286.6" y="81.8" width="10.0" height="46.6" rx="2" fill="#10b981" opacity="0.9" style="animation: igFloat 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 1.40s; transform-box: fill-box; transform-origin: center;" />
  <rect x="302.6" y="104.3" width="10.0" height="24.1" rx="2" fill="#10b981" opacity="0.9" style="animation: igFloat 4.1s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 1.75s; transform-box: fill-box; transform-origin: center;" />
  <rect x="318.6" y="60.3" width="10.0" height="68.1" rx="2" fill="#10b981" opacity="0.9" style="animation: igFloat 5.0s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 2.10s; transform-box: fill-box; transform-origin: center;" />
  <rect x="334.6" y="65.7" width="10.0" height="62.7" rx="2" fill="#10b981" opacity="0.9" style="animation: igFloat 5.9s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.35s; transform-box: fill-box; transform-origin: center;" />
  <rect x="350.6" y="66.5" width="10.0" height="61.9" rx="2" fill="#10b981" opacity="0.9" style="animation: igFloat 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 0.70s; transform-box: fill-box; transform-origin: center;" />
  <rect x="366.6" y="99.2" width="10.0" height="29.2" rx="2" fill="#3b82f6" opacity="0.9" style="animation: igFloat 4.1s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: 1.05s; transform-box: fill-box; transform-origin: center;" />
</svg>

How this actually works

Your description is hashed into a deterministic seed, which drives a small procedural composer. In Abstract style it auto-picks 2–4 motif primitives by keyword match (fully overridable), then places and colors real SVG shapes from that seed. In Character style it builds people the way modular illustration kits like unDraw and Humaaans do — separate, swappable layers (head, hair, clothing, pose) sharing consistent proportions instead of one fixed drawing — with a real blazer, lapels, collar, optional tie, cuffed sleeves, and shoes, plus a masculine/feminine style control that swaps the hairstyle and silhouette. These are deliberately flat, stylized figures, not an attempt at photorealism — that isn't something hand-authored SVG can credibly deliver. Every shape's color resolves through a shared token system that can be evaluated for either theme, which is what lets clicking the light or dark preview switch the copied code to that theme's actual literal colors instead of one generic export. Same input always produces the same layout; hitting "Shuffle" changes the seed for a new arrangement without touching your text. No image-generation API, no external calls — it's all local geometry. The second tab ("Match a site scene") is the older, separate tool that maps a topic to one of the 16 hand-built scenes this site's own blog/project cards use.

Sample tool by Adesh Shukla — fully client-side, no image-generation API involved.