LLM Programmatic Image Generation

When the LLM becomes
the rendering engine

Diffusion models guess at pixels. Code specifies them. One approach costs $0.08 per image and hallucinates your text. The other costs $0.0006 and renders it perfectly.

133×

Cheaper

0ms

Render cost

100%

Text accuracy

Animated crayon-style illustration of a boy with a cat, generated by Claude via SVG code

Claude Fable 5 · Pure SVG · Animated

Try live demo See costs

Economics

The cost curve bends at the first image

Diffusion charges per render. Code charges per token. At scale, one of these lines goes flat.

Monthly cost calculator

Images/mo: 1,000

GPT Image 1.5 ($0.034/img med)$34

Nano Banana 2 ($0.067/img 1K)$67

gpt-image-1-mini ($0.011/img)$11

LLM→SVG Haiku ($0.014/img)$14.00

Unsplash + overlay ($0.003)$3.00

At 1,000 images/month: Haiku SVG saves $20.00 vs GPT Image 1.5. That is 2x cheaper.

Comparison matrix

Method	Cost/img	Speed	Text	Editable	Photo
GPT Image 1.5 (OpenAI)	$0.009–0.20	3–10s	Good	No	Yes
gpt-image-1-mini	$0.005–0.05	2–6s	Good	No	Yes
Nano Banana 2 (Google)	$0.045–0.15	2–8s	Good	No	Yes
LLM → SVG	$0.004–0.10	1–5s	Perfect	Full	No
LLM → HTML	$0.001–0.045	2–5s	Perfect	Full	No
LLM → p5.js / Three.js	$0.001–0.003	2–5s	Perfect	Full	Canvas/WebGL
LLM → Blender/UE5	$0.002–0.01	5–30s	Perfect	Full	Yes
Unsplash+Overlay	~$0.003	2–5s	Perfect	Full	Real
GenClaw (hybrid)	$0.05–0.25	15–60s	Perfect	Partial	Yes

Frontier models (GPT Image 1.5, Nano Banana 2) now render text well — likely using code-based composition internally. The differentiators for programmatic: full editability, deterministic output, version control, and 2–50× cost savings at scale. Prices as of July 2026.

Interactive

What the output actually looks like

Drag a slider. The SVG re-renders instantly. This is the raw output of a single LLM call, unretouched.

Controls

Chart

KPI Card

Bars:7

Max:100

Gap:13

Data:8

Palette

Frame

Uptime %:95.0%

Trend:+2.0%

TOKEN COST: ~800 tok ≈ $0.0002

Rendered output

Generated SVG code

The ceiling, not the floor

Magazine-grade illustration. Zero pixels generated.

An 8-plate editorial series in one coherent visual system. Every shape, line, and glyph is SVG code produced by a single LLM call.

Gallery — "Subtractive Craft" series (6 of 8 plates)

~35–50 KB SVG · ~$0.04/plate · Claude Sonnet

I · THE SCULPTOR

III · AI FINGERPRINTS

IV · THE LEAKING BUCKET

VIII · THE CASCADE

IX · THE ICEBERG

X · SHOW, DON'T TELL

One design system, thirteen plates. Warm paper, single blue accent, scientific framing. Registration marks, figure numbers, monospace captions. The LLM followed a style document and maintained consistency across the entire series.

$0.52 for a complete editorial set. A human illustrator quotes $500–3,000 for this scope. The SVGs scale to any resolution. Every element is addressable, editable, animatable. The style transfers to new subjects in one prompt.

Production-grade output

AWS architecture diagrams. One prompt. Every icon correct.

AI agents generate broken diagrams because stencil names are wrong. This skill carries 270+ verified icon mappings. Output opens clean in draw.io with zero manual fixes.

The problem

draw.io stencil names don't match AWS service names. Renamed services keep old identifiers. Without a verified catalog, agents guess and icons render as empty boxes.

✗ Without skill:

mxgraph.aws4.dynamodb_table → empty box

mxgraph.aws4.open_search → empty box

✓ With skill:

mxgraph.aws4.dynamodb → renders correctly

mxgraph.aws4.elasticsearch_service → renders correctly

INSTALL:

npx skills add vidanov/aws-architecture-diagram-skill

GitHub → 270+ verified icons

Example: Event-driven order processing

Prompt used: "Create an event-driven order processing architecture with SQS, Lambda, DynamoDB, and EventBridge"

270+

Verified icons

.drawio

Native editable

Runtime deps

MIT

License

No MCP server. No Python. No binary. A markdown file the agent reads. It enforces left-to-right flow, 78px icons, correct strokeColor rules, and minimum spacing. Works with ChatGPT, Claude, Kiro, Cursor, or any agent that accepts custom instructions.

Best of both

Real photography. Programmatic precision.

Unsplash gives you the photograph for free. The LLM writes the overlay where text, data, and layout must be exact. Cost per image: ~$0.003.

Cityscape / Scale

Abstract / Minimal

Workspace / Team

Tech / Data center

Nature / Growth

Photo: Unsplash (free) + LLM overlay (~$0.003 total)

Cloud Migration Playbook

5 phases · 12 weeks · 3 workstreams

47%

Cost reduction

99.95%

Target SLA

3×

Deploy freq

Organic growth theme · Unsplash + LLM

Sustainable Architecture

Carbon-aware · Auto-scaling · Right-sized

62%

Carbon ↓

18ms

P99 latency

Regions

Downtime

Enterprise scale theme · Unsplash + LLM

Platform Engineering at Scale

12 teams · 340 microservices · 1 platform

340

Services

2.4M

Req/sec

4.2s

Avg deploy

Minimal / Abstract theme · Unsplash + LLM

Think Different.

Build Programmatic.

When your image is code, every pixel has intent. No hallucination. No guessing. Pure signal.

Team / Collaboration theme · Unsplash + LLM

Sprint Velocity Dashboard

Real-time metrics for engineering leadership

Velocity

+23%

vs last sprint

Cycle time

1.8d

from 3.2d

Escaped bugs

target: 0

Team mood

8.2

/10 avg

The split: Photographs carry emotion and context. Code carries precision. Combine them and you get blog heroes, social cards, and presentation slides that look commissioned but cost three-tenths of a cent.

Free photo APIs

Service	Library	Rate limit	License
Unsplash	3M+ photos	50/hr → 5K approved	Free commercial
Pexels	3M+ photo+video	200/hr	Free commercial
Pixabay	4M+ images	100/min	CC0-like
Lorem Picsum	~1K curated	Unlimited	Unsplash License

The same principle, further

Presentations and video. Still just code.

If an LLM can write SVG, it can write slides. If it can write React components, it can render video. The programmatic approach extends beyond static images.

Reveal.js

revealjs.com

The LLM generates a single self-contained HTML file. Speaker notes, transitions, auto-animate, code highlighting, LaTeX. Opens in any browser. No PowerPoint, no Keynote, no SaaS subscription.

Prompt:

"Create a 12-slide deck on serverless cost optimization with code examples and speaker notes"

→ 1 HTML file, ~15KB, works offline

Self-contained HTML Auto-animate PDF export Speaker notes

revealjs.com →

Remotion

remotion.dev

React components rendered frame-by-frame to MP4. The LLM writes JSX with motion logic. Programmatic video: animated explainers, data visualizations, social clips. Each frame is deterministic.

Concept:

React component → 30fps frames → ffmpeg → MP4

→ LLM writes the component, Remotion renders the video

Programmatic video React + TypeScript Deterministic Server-side render

remotion.dev →

The pattern is consistent: any visual output that can be described as code can be generated by an LLM. Slides (HTML), video (React/JSX), diagrams (draw.io XML), illustrations (SVG), charts (Python/JS). The rendering engine already exists. The LLM just needs to know its API.

The renderer spectrum

From SVG to Unreal Engine. Same pattern. More power.

Every rendering engine that accepts code as input is an LLM target. The browser is just the beginning. Game engines, creative coding frameworks, and 3D tools all follow the same economics: tokens in, visuals out.

The renderer spectrum — capability vs. cost per image

Renderer	Capability	Typical tokens	Cost/image	LLM writes	Runs on
SVG (browser)	2D vector	~800	~$0.01	SVG markup	Any browser
Canvas 2D (browser)	Pixel art, particles, simulations	~2,400	~$0.04	JavaScript	Any browser
p5.js (browser)	2D creative/generative	~1,500	~$0.02	JavaScript sketch	Any browser
Three.js (browser)	3D scenes, PBR	~3,000	~$0.05	JavaScript scene	Any browser (WebGL)
Manim (Python)	Math animations	~2,000	~$0.03	Python scene class	CLI + ffmpeg
Godot (.tscn)	2D/3D game scenes	~2,500	~$0.04	Scene text file	Godot (free, OSS)
Blender (Python)	Photorealistic 3D	~5,000	~$0.08	bpy Python script	Headless CLI
Unreal Engine (Python)	AAA-grade real-time	~8,000	~$0.12	Python + Blueprints	UE Editor / headless
GPT Image 1.5 / Nano Banana 2	Photorealistic	N/A	$0.02–0.20	—	API

Even the most capable option (Unreal Engine at ~$0.003) is 7–70× cheaper than diffusion. And every output is editable, deterministic, version-controllable source code.

p5.js

Creative coding in the browser

Processing-based creative coding. Particles, physics, shaders, generative art. Sketches are typically 20–80 lines. Renders on canvas — same "browser renders for free" principle as SVG.

LLM writes:

function setup() { createCanvas(800, 600); }

function draw() { /* particles, noise, etc */ }

→ Generative art, data viz, interactive simulations

~1,500 tokens Browser-native Interactive GPU via WebGL

Three.js / Babylon.js

3D in the browser via WebGL/WebGPU

Full 3D scenes with PBR materials, shadows, post-processing. LLMs write Three.js fluently. Product shots, architectural visualizations, interactive 3D — all in the browser with zero infrastructure.

LLM writes:

const scene = new THREE.Scene();

scene.add(mesh, light, camera);

→ Product shots, arch viz, 3D data viz

~3,000 tokens PBR materials WebGPU ready No install

Blender (headless)

Photorealistic 3D via Python scripting

Hollywood-grade rendering from a Python script. Cycles path tracer, Eevee real-time. Runs headless: blender -b -P script.py. The LLM constructs scenes, sets materials, triggers renders.

LLM writes:

import bpy

bpy.ops.mesh.primitive_cube_add()

bpy.ops.render.render(write_still=True)

→ Product viz, arch renders, scene composition

~5,000 tokens Path tracing Free & OSS Headless CLI

Godot Engine

Scene files are human-readable text

Fully open-source game engine. Scene files (.tscn) are plain text — an LLM can write them directly. GDScript is Python-like. 2D renderer is excellent, 3D is capable.

LLM writes:

[gd_scene format=3]

[node name="Player" type="Sprite2D"]

position = Vector2(400, 300)

→ Game UIs, level design, 2D/3D scenes

~2,500 tokens Text-based scenes MIT license 2D + 3D

Unreal Engine 5

AAA-grade rendering via Python API

Lumen GI, Nanite geometry, path tracing. Full Python scripting API. The LLM writes 50 lines placing actors, setting materials, positioning cameras. Renders a frame that rivals film VFX.

LLM writes:

import unreal

actor = unreal.EditorLevelLibrary

.spawn_actor_from_class(...)

→ Film-quality scenes, virtual production

~8,000 tokens Lumen + Nanite Python API Requires UE install

Manim

3Blue1Brown's math animation engine

Publication-quality mathematical animations and explainers. The LLM writes a Python scene class, Manim renders frames to video. Used by educational creators worldwide.

LLM writes:

class MyScene(Scene):

def construct(self):

self.play(Create(circle))

→ Math explainers, animated proofs, data stories

~2,000 tokens Video output LaTeX support MIT license

The pattern holds at every tier: the LLM pays tokens to write code. The renderer (browser, Blender, Unreal, Godot) does the heavy lifting for free. As you move up the capability stack, token count grows linearly (~10×) while rendering power grows exponentially. A $0.003 Unreal render competes with outputs that cost $0.20+ from diffusion services.

Live demo — generative art via canvas (same principle as p5.js)

Seed: 1 · ~40 lines of code · ~1,200 tokens

// LLM-generated generative art
// ~40 lines · renders on <canvas>
function draw(ctx, W, H, seed) {
  // Seeded random for determinism
  let s = seed;
  const rand = () => {
    s = (s * 1664525 + 1013904223) & 0xFFFFFFFF;
    return (s >>> 0) / 0xFFFFFFFF;
  };
  // Background
  ctx.fillStyle = '#0a0f0d';
  ctx.fillRect(0, 0, W, H);
  // Particle field
  for (let i = 0; i < 200; i++) {
    const x = rand() * W;
    const y = rand() * H;
    const r = 1 + rand() * 3;
    const hue = 140 + rand() * 40;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fillStyle = `hsla(${hue},70%,60%,${0.3+rand()*0.5})`;
    ctx.fill();
  }
  // Flow lines
  for (let i = 0; i < 12; i++) {
    ctx.beginPath();
    let x = rand() * W, y = rand() * H;
    ctx.moveTo(x, y);
    for (let j = 0; j < 20; j++) {
      x += Math.cos(y*0.01+seed)*8;
      y += Math.sin(x*0.01)*8;
      ctx.lineTo(x, y);
    }
    ctx.strokeStyle = `hsla(155,80%,50%,0.3)`;
    ctx.lineWidth = 1 + rand() * 2;
    ctx.stroke();
  }
}

Cost: ~$0.0005 · Deterministic · Infinite variants from seed

Beyond charts: animated SVG scenes generated by LLM

Pure SVG · No JS runtime · $0.001 each

FLOW FIELD · ~1,800 tokens · Animated particles

MANIM-STYLE MATH · ~2,000 tokens · Animated tracer

ISOMETRIC DATA CENTER · ~2,400 tokens · Animated data flows + LEDs

NEURAL NETWORK · ~2,800 tokens · 16 neurons · Animated signal propagation

Open 3D Crystal Garden (Three.js) → Open Particle Universe (Canvas) → Interactive demos · Drag/click/scroll · No libraries

Blog heroes & social cards — single LLM call, animated

CIRCUIT BOARD · Blog hero (2:1) · Animated signals · ~2,200 tokens

PROCEDURAL LANDSCAPE · 3 layers · Fireflies + shooting star · ~1,600 tokens

Every visual on this page was generated by code. The landscape has parallax depth, the circuit has animated signal propagation, the neural network has signal pulses. All pure SVG. All render at any resolution. Total cost for all 7 visuals in this section: ~$0.007.

Why game engines matter for this thesis

Scene files are text

Godot .tscn, Unreal Blueprints (JSON), Unity YAML scenes — all human-readable, all LLM-writable. The "code as canvas" principle applies directly to game content.

Headless rendering exists

Blender, Godot, and UE5 all support headless/CLI rendering. No GUI needed. Perfect for CI pipelines: prompt → LLM → code → render → PNG fully automated.

The skill multiplier

LLM creates a reusable rendering skill (Blender material library, UE5 scene template, Godot prefab). First image costs $0.40. Images 2–1000 cost only prompt tokens. Same economics as your crayon-art example.

Live benchmark

Same prompt. Four models. Real costs measured.

Crayon-style illustration (boy with cat) generated as SVG via AWS Bedrock. Every image below was produced programmatically in a single API call — no image generation models involved.

Benchmark results — 2026-07-08, us-east-1

Model	Time	In / Out tokens	Cost	SVG size	Visual quality
Claude Opus 4.6	69.1s	322 / 6,437	$0.163	15.9 KB	Most complete scene
Claude Opus 4.8	47.7s	450 / 4,089	$0.105	7.3 KB	Fastest, cleanest style
Claude Sonnet 5	48.6s	450 / 6,128	$0.093	10.8 KB	Cheapest, dark overlay issue
Claude Fable 5	100.0s	450 / 7,531	$0.381	13.2 KB	Sophisticated filters, slow

Winner (cost/quality): Opus 4.8 — clean crayon style at $0.105 in 48s. Sonnet 5 is cheapest but has a filter rendering issue (dark overlay). Fable 5 is 4× more expensive with no proportional quality gain for this task.

Claude Opus 4.6 — $0.163 / 69.1s

Claude Opus 4.8 — $0.105 / 47.7s

Claude Sonnet 5 — $0.093 / 48.6s

Claude Fable 5 — $0.381 / 100.0s

Prompt used (same for all models)

System: You are an expert SVG artist. Output ONLY valid SVG code. Self-contained, no external resources.

User: Create a complete SVG image of a boy with a cat in a crayon art style.
- Look like a painting drawn with crayons by a 10-year-old child
- Rough, wobbly lines (feTurbulence + feDisplacementMap)
- Big heads, simple features, stick-like limbs
- White paper background with slight texture
- Bright, childlike colors (primary + pastels)
- Cute decorations: flowers, stars, clouds, candy, hearts
- Boy smiling, standing next to cat
- Cat: round body, triangle ears, whiskers
- Canvas: 800×600px

Pricing reference (Bedrock on-demand, per 1M tokens)

Model	Input	Output	Context	Notes
Opus 4.6 / 4.8	$5	$25	200K	Standard inference profiles
Sonnet 5	$3	$15	200K	Best cost, weakest visual result here
Fable 5	$10	$50	1M	Requires provider_data_share (30-day retention)
DALL-E 3 HD (comparison)	$0.08 flat		—	Non-editable PNG, ~15s, better artistic quality

Key takeaway: Programmatic SVG generation via LLMs costs $0.09–$0.38/image (comparable to diffusion models) but produces editable, scalable, version-controllable output. Trade-off: 3–5× slower, lower artistic quality for illustrations — but superior for diagrams, charts, and anything requiring post-generation editing.

Method 2: PIL crayon library (code generates scene script → executes → PNG)

Same models, different approach: each model writes a Python script using a custom crayon.py PIL library that simulates wax crayon on paper. The script is then executed locally to produce the PNG. Much more realistic crayon texture than SVG filters.

Model	Gen time	Exec time	Total	Cost	Quality
Claude Opus 4.6	25.2s	2.6s	27.8s	$0.064	Cleanest composition
Claude Opus 4.8	26.5s	1.5s	28.0s	$0.080	Best cat, odd head shape
Claude Sonnet 5	51.3s	8.8s	60.1s	$0.051	Detailed but hair block issue

PIL approach is cheaper and faster ($0.05–0.08 vs $0.09–0.38) because the model writes a short script (~100 lines) rather than a full SVG. The crayon texture simulation is convincing (wax grain, paper feel), but the visual results are weak — models struggle with coordinate-based figure drawing, producing deformed heads, misplaced hair, and awkward proportions. The skill needs a human refinement pass to look good.

Opus 4.6 — $0.064 / 28s

Opus 4.8 — $0.080 / 28s

Sonnet 5 — $0.051 / 60s

Fable 5 — $0.170 / 39s

Reference: Same prompt via ChatGPT image generation (diffusion model)

ChatGPT generated crayon art - boy with cat

The quality gap is clear. The diffusion model produces photorealistic crayon texture, natural color blending, and hand-drawn warmth that SVG filters cannot replicate. Cost: ~$0.04 (GPT Image). Time: ~12s. But: the output is a flat PNG — not editable, not scalable, not version-controllable.

Reference

The full toolkit landscape

Every tool that fits the "LLM writes code → visual output" paradigm, plus the hybrid and diffusion approaches for comparison.

Programmatic generation (LLM → code → render)

Tool / Format	Output	Best for	Link
SVG (raw)	Vector image	Icons, diagrams, illustrations, charts	Native browser
HTML/CSS	Screenshots, cards	Social cards, OG images, dashboards	Puppeteer / Playwright
Matplotlib / Seaborn	PNG/SVG charts	Data visualization, scientific plots	matplotlib.org
Mermaid	SVG diagrams	Flowcharts, sequences, ER diagrams, Gantt	mermaid.js.org
D2	SVG diagrams	Architecture, infrastructure diagrams	d2lang.com
PlantUML	SVG/PNG	UML, sequence, component diagrams	plantuml.com
draw.io XML	.drawio (editable)	AWS architecture, network, system design	aws-arch-diagram-skill
p5.js	Canvas / SVG	Generative art, animations, data art	p5js.org
Three.js	WebGL / 3D	3D product views, scene renders	threejs.org
TikZ / LaTeX	PDF/SVG	Academic figures, math diagrams	TeX distributions
Excalidraw	SVG (hand-drawn look)	Whiteboards, sketchy diagrams	excalidraw.com
Reveal.js	HTML slides	Presentations, decks, speaker notes	revealjs.com
Remotion	MP4 video	Animated explainers, data videos, social clips	remotion.dev
Motion Canvas	MP4 video	Code-driven animations, manim alternative	motioncanvas.io
Manim	MP4 video	Math animations (3Blue1Brown style)	manim.community
GSAP	Animation library	Timelines, easing, scroll-triggers for SVG/Canvas/DOM	gsap.com
Lottie	JSON animation	Cross-platform animations (iOS/Android/web). Verbose JSON, high token cost	lottiefiles.com
Rive	Binary .riv	Interactive state-machine animations. Binary format, not LLM-writable	rive.app

Hybrid approaches (code + diffusion / retrieval)

Tool / Paper	Approach	Output	Status
GenClaw	Agentic: Conceptualize → Sketch (code) → Color (diffusion)	PNG (photorealistic + accurate text)	arXiv May 2026
Unsplash + LLM overlay	Free photo API + code-generated text/data overlay	Composite image	Production-ready
Vercel OG	JSX → image at the edge (Satori engine)	PNG (social cards)	vercel.com/docs
Satori	HTML/CSS subset → SVG (no browser needed)	SVG	github/vercel/satori
Puppeteer / Playwright	HTML → screenshot (headless browser)	PNG/PDF	Production-ready

Diffusion / traditional (for comparison)

Service	Cost/image	Text quality	Editable	Best for
GPT Image 1.5 (OpenAI)	$0.009–0.20	Good	No	Flagship, editing, prompt adherence
gpt-image-1-mini (OpenAI)	$0.005–0.05	Good	No	Budget, prototyping, volume
Nano Banana 2 (Google)	$0.045–0.15	Good	No	Price-performance, Gemini ecosystem
Nano Banana 2 Lite (Google)	$0.017–0.08	Good	No	Budget tier, batch workflows
Midjourney v7	$0.08–0.20	Good	No	Artistic, stylized
Flux (Black Forest Labs)	$0.01–0.05	Good	No	Fast, open-weight
Ideogram 3	$0.02–0.08	Best	No	Text-heavy images, logos

Research & benchmarks

Paper / Resource	Finding	Date
GenClaw (arXiv:2605.30248)	Code-driven agentic generation scores 0.878 compositional accuracy vs GPT-Image 0.832	May 2026
SVG Generation Benchmark	Claude best at abstract instructions, Gemini cleanest code, GPT most creative	Dec 2025
LLM Cost at Scale	Flash-tier models (Gemini Flash, Haiku) achieve $0.004–$0.014/image for simple SVG; frontier models (Sonnet, Opus) $0.05–0.10 for quality output	2025–2026
Text Rendering Comparison	Code-based approaches achieve 100% text accuracy vs 60–85% for diffusion models	Ongoing

EVERY VISUAL ON THIS PAGE WAS PRODUCED BY CODE. NO DIFFUSION MODEL WAS CALLED. NO PIXEL WAS GUESSED.