The Cast · seven poses each, CSS-recolorable, CSS-scalable, CSS-animated
Foundations
Adapted from the working cast on robertrevans.com — same anatomy, same "wob"-filter hand-drawn feel, ported to the CSS-controllable rules every other set in this playbook already follows. New for this set: a second controllable color, --figure-fill, for the head and body — currentColor alone would make the eyes and mouth invisible against a same-color head.
An icon is one color because every part of it is the same shape. A figure has a head with a face INSIDE it — if the head fill matched the line color, the eyes and mouth (also drawn in that line color) would vanish into it. So this set adds one property beyond the others: --figure-fill, independent of color.
default
color: teal
--figure-fill: coral
Two properties
color vs. --figure-fill
Change one, the other, or both — they're independent.
color drives line work (stroke="currentColor", plus eyes/mouth/props via fill="currentColor").
--figure-fill drives the head/body fill only, defaulting to a paper tone.
01
Size, live
Same figure, one CSS property. Note the aspect ratio: .figure is set to 1.6em x 2em, not a square — these are standing figures, not icons.
24px
40px
64px
100px
Scale
One source, any size
The animation scales identically with it — it's a CSS transform on a vector group, not a pixel effect.
02
Color, live
Pencil-on-paper is the default. Nothing locks it there.
default
robot, steel
terracotta
Recolor
Works identically for either character
Human and robot share the same two-property mechanism.
03
The fourteen poses — drag to resize
Seven poses, matched between the two characters: thinking, running, pulling, flying, vomiting, bending over tired, and pointing — the one pose drawn front-on, looking at and reaching toward the viewer instead of in profile. Most animate by default; vomiting and tired are deliberately static except their one-shot flop/bolt (see job 05). All respect reduced-motion.
thinking
60px
running
60px
pulling
60px
flying
60px
vomiting
60px
tired
60px
pointing
60px
thinking
60px
running
60px
pulling
60px
flying
60px
vomiting
60px
tired
60px
pointing
60px
S
For fun — the sumo build
Not part of the matched cast — a genuinely different body (a real round belly, a topknot, a belt band) rather than a resize or recolor of the same figure. Three poses: thinking, rolling, and — because it was too fun not to — flossing.
sumo thinking
60px
sumo rolling
60px
sumo flossing
60px
04
In context
Dropped into ordinary cards at illustrative size — no different from placing an icon, just bigger.
"Some days the rope wins."
Still working through the third rung.
The agent finishes the draft first.
05
Construction rules — for the next pose
The rules that keep a thirteenth pose consistent with these twelve.
01
One shared viewBox (0 0 160 200) and one shared shadow anchor.Every pose reuses the same #shadow symbol at the same position so the whole cast aligns in a grid.
02
Line work is currentColor; head/body is --figure-fill.Never hardcode either — that's the one rule this whole set exists to enforce.
03
No live filter, ever.The organic curves already carry the hand-drawn feel — a filter on top would only reintroduce the currentColor problem this set was built to avoid.
04
Reuse an existing animation feeling before inventing a new one.Bubbles rise-and-pop, wind streaks past, a body sways under strain, a cape drifts — a new pose should match one of these before it earns a new keyframe. Not every pose needs to move: vomiting and tired are static on purpose.
05
A prop earns its place only if the pose is unclear without it.The oil puddle and bolt make robot-vomiting readable; a sitting figure needs no prop at all.
Where this set stops: fourteen poses is a first cast, not a finished one. Since none of this was verified in a live browser during authoring, expect a correction pass on exact curve placement before it ships anywhere real — same as the check icon.
Created for you, with ❤️ by Robert Evans· The AI Design Architect