SVG
svg Medium — a normal phone is fineA procedurally generated character drawn as real vector shapes — head and torso, built from a seed, scaling to any screen without ever blurring.
Builds live SVG DOM elements, not pixels. It owns its own engine and render loop; the mount here is a thin uniform wrapper around it.
What it can express
- A character generated from a seed — the whole figure — proportions, features, colouring — is derived procedurally from a seed string, so a name produces a consistent person
- Bust or half-body framing — the only two framings the engine renders; bust crops the viewBox tighter around the head and shoulders
- Four named expressions — smile, thoughtful, enthusiastic and concerned — each a real blend of six-ish facial channels plus a head pose, not a swapped picture
- Head pose inside the expression — thoughtful rolls the head −2.4° and pitches it 0.8°; enthusiastic lifts the chin — posture is part of the emotion
- Named facial channels — mouthSmileLeft/Right, cheekRaiseLeft/Right, eyeSquintLeft/Right, browInnerUp, browDown, mouthFrown, mouthNarrow — a real rig vocabulary
- Gesture and idle motion — the motion mixer runs beats, offers and points between phrases with a seeded, non-repeating pool
- Resolution independence — because it is vector, the same avatar is crisp on a watch and on a 4K display, and it can be exported as a standalone .svg file
- It pauses when you cannot see it — the only engine of the six that stops working when scrolled off-screen or when the tab is hidden — a genuine battery saving
- Reduced-motion aware — honours prefers-reduced-motion live, and re-checks when the setting changes mid-session
Moods: 25 protocol moods folded onto the engine's own four expressions plus neutral — the honest nearest of four, weighted by intensity. This card will not claim 25 distinct faces: there are four.
What it costs a device
| measured on this box | 375×667 | 1440×900 |
|---|---|---|
| cold mount → first frame | 435 ms | 390 ms |
| rAF fps — idle | 60 | 57 |
| rAF fps — speaking | 59 | 56 |
| CPU cores busy — idle | 0.41 | 1.12 |
| CPU cores busy — speaking | 0.84 | 1.67 |
| worst frame gap (p95) | 16.7 ms | 16.8 ms |
| over the wire | 299 KB | 299 KB |
| JS heap | 10 MB | 10 MB |
The most viewport-sensitive 2D engine by a wide margin: 0.41 → 1.12 cores idle just from 375 to 1440, and 1.67 cores while speaking — the only 2D engine measured above one full core. Speaking doubles its cost, unlike every other 2D engine here.
Why medium: Vector shapes are rasterized by the browser at display resolution, so cost climbs with screen area, and speaking doubles it again. It stays smooth, but it is the 2D engine most likely to warm a phone on a large screen.
Dials it really exposes today
Try it
/alive-site/svg-body.html
Universal Stage — SVG beside the other fouropen/alive-site/universal-stage.html
Honest limits
- It is NOT a full body. The engine renders bust or half only — the spec calls full-body "post-slice" and the guard forces anything else back to half. Documents describing an "SVG full-body" engine are ahead of the code.
- It cannot wink. Both eyelids are wired to a single blink value every frame, so no code path can close one eye — the geometry would support it, the drive does not.
- Four expressions carry all 25 moods. Nuance between, say, "proud" and "cheeky" does not exist here — both land on smile at different weights.
- The heaviest 2D engine on a big screen, and the only one measured above a full CPU core — 1.67 cores while speaking at 1440, four times its own 375 cost.
- You cannot load this engine alone. The mount contract statically imports every 2D engine, so ASCII, Sketch, SVG and Kinetic each pull the same ~299 KB module graph — measured byte-identical across all four.
Numbers are software-renderer numbers. Measured 2026-08-04 on the estate box
(18 vCPU, load 2.8–5.3 during the run) under chromium_headless_shell-1232 + SwiftShader, 3 runs per cell, median reported.
SwiftShader rasterizes on the CPU, so a real phone GPU changes the picture — most of all for 3D.
Read the ordering between engines, not the absolute figures.
Evidence for every claim: CARD-FACTS.md. Harness: work/measure-engines.mjs.