# Stickers and mascots

> Build an isometric sticker that reads as a made object, and turn a flat animated clip into one editable, recolorable SVG.

Module: SVG and icons · Level: intermediate · 9 min · https://school.agents.org.in/visual/svg/stickers-and-flipbooks

Play the clasp. Then switch to "Flat clip-art" and play it again.

*[Interactive demo: The same lock. The sticker has thickness, parts and a still hold after the action. The clip-art is one shape with the detail painted on.]*

The flat one is not wrong, exactly. It just looks like it was generated. The sticker looks like someone made it. That difference comes from a short list of rules, most of them from Kelvin Adithya's fun-isometric, a skill that draws and animates exactly this kind of sticker.

## Where stickers belong

Empty states, onboarding, feature cards: the rare, friendly screens. Not inside buttons, not in a list of fifty rows. A sticker is illustration, so it gets illustration time (a second of action, then rest), never the 200ms of a control's feedback.

## Drawing one

**Step: One square, one outline.** A 500-unit canvas, the subject filling about half of it with room to swing. One ink outline, about 5 units, on every part, with sharp corners. No gradients, no drop shadows, no glow.

**Step: Faces lean.** An isometric (A way of drawing 3D objects without perspective: faces lean at fixed angles, so a box shows its top and two sides and parallel lines stay parallel) face is tilted back, so rectangles become slanted parallelograms and circles become ellipses. It is not just rotated. The side falls the same way (down and left) on every part.

**Step: Every part is a slab.** Each part is a slab (A flat shape given thickness, like a cookie cut from dough. Isometric stickers build every part as a slab so it reads as a made object, not a flat drawing): a flat shape with its own thickness. The lock is a body slab, a shackle slab and a raised keyhole plate. Three to six parts for one object.

**Step: Sparse ink detail.** One keyhole. Two pupils. A few lines. Sparkles are small white stars with the same outline.

**Painting the detail flat onto one shape** is the tell of a generated sticker. Build it from parts.

## Colors as jobs, not hex codes

The sticker's fills are named by palette role (A named job for a color (main, deep, tint, gold, ink) instead of a fixed hex value, so a whole illustration can be recolored to a new brand without losing what each part means): `main` for bodies, `deep` for the dark side, `tint` for pale fills, `gold` for coins and stars, plus `ink` and `white`. Two accents and white per icon.

Roles are what let a sticker move to a new brand. Map `main` and `deep` to your design tokens and every part keeps its meaning. Leave a sticker on its default six-color palette in a two-color product and everyone can tell nobody mapped it.

## Moving one

- **Pick the motion by the verb.** A lock *clasps*, a coin *bounces*, a bell *wiggles*, a plane *drifts*. The verb decides the movement, not the noun.
- **Use tuned keyframes, not a sine wave.** The presets come from After Effects keys an animator already tuned. Change the amplitude or start; never stretch them.
- **Pivot where it would hinge.** Children follow 4 to 6 frames late, so nothing moves in lockstep.
- **Sparkle on the beat.** The glint starts on the slam, the landing, the reveal.
- **Then hold still.** Loops run two to three seconds with the action in the first half. Filling the hold with idle wobble is the quickest way to cheapen it.
- **Pop with scale, never fade.** A slab is drawn as a stack of copies, so fading it shows the stack.

> **Where its rules meet the rest of the course.** Its entrance pops from a small scale on a bounce. Menus and modals still enter from 0.95, never from nearly zero; a sticker's pop is a character moment, so it keeps its own. Idle loops are for one hero sticker on a rare screen; in a list, play once and rest. And your brand's palette always wins over its default inks.

If fun-isometric is installed, let it draw, check and export the sticker (live on a canvas or as looping video with a still poster). If not, build to these rules as an animated SVG. Either way, check it at 160px beside your other stickers: same line weight, faces leaning, every part with thickness.

## From a video clip to a vector mascot

Sometimes the source isn't drawn by hand at all. It is a short, flat animated clip, perhaps made by a video model: a rooster typing, a blob waving. That can become one SVG that is tiny, sharp at any size and recolorable.

*[Interactive demo: A vector flipbook: six traced frames, each its own group, shown one at a time at 12 frames a second. Try the jitter and the recolor.]*

It only works for **simple, flat art**: solid fills, two to eight colors, clean outlines, no gradients or texture. Ask for that when you generate the clip ("flat vector style, solid colors, no gradients, plain background").

**Step: Extract frames.** `ffmpeg -i clip.mp4 -vf "fps=12,scale=512:-1" frames/f_%03d.png`. Twelve frames a second reads as animation; 24 doubles the file for little gain.

**Step: Reduce the colors, then trace.** Quantize each frame to its handful of colors first, then vectorize (Trace a pixel image into vector shapes. Tools like vtracer turn each flat color region of a frame into a path) with vtracer (Potrace for pure black and white).

**Step: Clean and name.** Remove specks, merge near-identical colors, delete the background, run SVGO. Name each color region the same in every frame (`body`, `beak`, `eye-l`), matched by position and color. Named layers are what make it editable.

**Step: Assemble and budget.** One SVG, one group per frame, a stepped animation: a vector flipbook (One SVG file holding every frame of an animation as its own group, shown one at a time by a stepped animation, like flipping the pages of a sketchbook). Colors become CSS variables. Merge identical frames into longer holds. A simple 24-frame loop lands around 20 to 60 KB; bigger means slivers survived step three.

*(Traced frames wobble by a pixel because each was traced alone. Trace at one resolution, and reuse the last frame's paths for a hold.)*

The SVG stays the editable source. Export onward to Lottie, Rive or MP4 only when a platform needs it.

**Brief a sticker (paste into your agent):**

```text
Make an animated isometric sticker of a padlock for our empty "No saved passwords" state.
- 500-unit canvas, one 5-unit ink outline, faces leaning, side falling down-left
- three parts, each its own slab: body, shackle, keyhole plate
- fills by role (main, deep, tint, ink, white), mapped to our tokens --accent and --accent-deep
- verb "clasp": shackle drops, two small bounces, sparkle on the slam, then a still hold; play once, no idle loop
- reduced motion shows the closed lock
Check it at 160px next to our existing stickers.
```

**Check yourself:** You turn a mascot clip into a vector flipbook and the file is 900 KB. What most likely went wrong?

- [ ] The clip was 12 frames a second
- [x] The vectorizer left thousands of slivers: the art wasn't flat enough, or colors weren't reduced before tracing
- [ ] The colors are CSS variables
- [ ] Each frame is its own group

*Why:* A simple loop should land around 20 to 60 KB. Gradients, texture or skipping the color-reduction step turn each frame into slivers; go back, quantize, clean and dedupe.

## In the skill

- https://school.agents.org.in/skill/svg/isometric-stickers.md
- https://school.agents.org.in/skill/svg/fun-isometric-reconciliation.md
- https://school.agents.org.in/skill/svg/video-to-vector-pipeline.md