CODE AS CANVAS
Your image budget
is 2–50× too high
Alexey Vidanov · July 2026
Claude Fable 5 · Pure SVG · Animated · No diffusion
Code in, image out. What changes?
The pipeline, quantified
PROMPT
"event-driven order system,
6 AWS services"
10 words in
LLM
reason + code gen
~800 tokens · 2.0s
<svg>
structured code
1.2 KB
RENDERED
editable image
$0.007–$0.10
You pay for tokens the model writes. The browser renders for free. matplotlib renders for free. draw.io renders for free.
Cost per image, visualized
At 10,000 images/month: $670 (Nano Banana 2) vs $40–140 (Haiku/Nova SVG). 5–17× difference.
THE QUESTION CHANGED
Not "can it render text?"
"Can I edit it after?"
change a color
diff it in git
same output tomorrow
$6 for 10K images
One style document. One LLM call per plate.
The same approach renders crayon art.
Pure SVG. Animated. No diffusion.
269 lines of SVG: crayon filters, displacement maps, paper texture, CSS animations. Every element is editable code.
Cost: ~$0.16 on Claude Opus 4.6. The boy waves, the cat's tail sways, clouds flow — all from <animate> tags. Try that with a PNG.
One template. Infinite variants.
Auto-cycling every 2s
Same code. Different arguments. The bars move, the colors shift. No re-prompting.
Real draw.io, edited live.
Rendered by draw.io in the browser. Every few seconds an edit is applied and re-rendered. 270+ AWS stencils, zero broken icons. Try that with a PNG.
README demos without screen recording
HTML + CSS animation. Loops forever. Weighs less than a favicon.
Photo + code = $0.003
Unsplash gives the photograph. The LLM writes the data overlay.
Result: blog heroes, social cards, presentation slides that look commissioned.
Free APIs: Unsplash (3M+), Pexels (3M+), Pixabay (4M+)
2KB of SVG. Infinite loop. No runtime.
Left panel: zero JavaScript, zero video files.
Pure SVG <animate> elements. The LLM writes it in one shot: 2KB of code that loops forever at any resolution.
Pick your renderer
Charts & KPIs
SVG · HTML · Matplotlib
Architecture
draw.io · Mermaid · D2
Illustrations
SVG + design system
Blog heroes
Photo + code overlay
Video & animation
Remotion · SVG→GIF · terminal
Presentations
Reveal.js · this deck
Every icon above is inline SVG. Dogfooding.
The renderer spectrum: SVG to Unreal
Even Unreal Engine quality at $0.003 is 7–70× cheaper than diffusion at $0.02–0.20.
Tokens grow linearly (10×). Rendering power grows exponentially. All outputs: editable source code.
The rendering engine
already exists.
Browsers, matplotlib, draw.io, Blender, Godot, Unreal — all render for free. The LLM writes their input.
github.com/vidanov/llm-programmatic-image-gen
Every visual in this presentation was generated by code.