The trick that stops it reading as a skull: it isn’t one head with two eyes — it’s two characters, each with one. Plain dark pupils that move — glance around, squash to blink, widen when happy. Now they can lean on each other, look at each other, take turns. Charm, not menace.
Two things made it creepy: red glowing pupils, and a fast jittery blink. Both gone. The eye is now just a plain black disc, and it carries expression by moving and resizing itself — a slow glance, a squash-to-blink, a widen for surprise. No white catchlight dots, no eyelids: just the dark eye, alive.
Beyond flat ember. Each of these borrows straight from the system: the glow stops (edge→core→deep→abyss), the feTurbulence film grain from the Glow & Grain lab, the support ramp. The last one is the interesting one — the mark as a cut-out revealing the live, breathing glow behind it.
How the textured ones work. They’re not SVG fills — they’re a CSS background (gradient / grain / the live glow) masked to the mascot silhouette, with the eyes drawn as a separate overlay on top. That means any treatment from the Glow & Grain lab drops straight in: mesh gradients, animated grain, even a photo. The flat/duotone/outline marks stay as inline SVG because they need the true two-tone split.
Not the CSS fake — this is the actual WebGL engine from the Glow & Grain lab, same Style + Warp-shape controls, rendered straight into the silhouette. Play with it here. (Opens on your Simple + Columns; try Soft Bézier + Circular, or Domain Warping for something liquid.)
Why bother. A flat mark is the workhorse, but a hero splash, a loading screen, or an app-store icon wants depth. This gives the mark a living surface without ever leaving the warm palette — the colours are your glow ramp, so it can’t go off-brand. Freeze a frame and export it, or let it drift.
Eyes are only the start. Because it’s two figures, the richest ideas play them off each other. Everything is cheap CSS transforms and halts under Motion Off + prefers-reduced-motion.
The payoff of a mascot: it can respond. Wire these to product moments — a save succeeds, a form errors, a job finishes, the app idles. Click to trigger. (Loops like Thinking / Sleepy stay until you switch.)
The real test of a mark: legibility at 16px. The thin gaps close up as it shrinks — the silhouette and the two dark eyes carry it. App tile, monochrome favicon, round avatar, maskable safe-area.
The rule holds: animate only where a wait, a greeting, or an empty moment earns it. Never twitching on a working screen.
Your first project shows up here.
A tiny pair on the primary action, quietly chatting. One per screen, max.