Code-drawn mascots

The brief

Mascots that work inside a product as well as on a poster. Each one had to stay on model across a turnaround, eight moods, real app screens and packaging, still read at icon size, and move.

We drew five, all in code. Four are for made-up clients: Bolt for a kids football practice app, Nimbus for a fintech and productivity SaaS, Marlow for a ginger and honey pantry brand, and Nubby, a water bear for a kids and teen habit app. The fifth, Zip, is a drone sidekick for GiveMePrompts itself. This is concept work and none of the four clients exist.

What we made

• Bolt, Nimbus and Marlow, each with a vector master, a four-view turnaround with silhouettes, an eight-mood sheet, three in-context scenes, a loop as MP4 and GIF, and a 1600x1200 presentation board
• A streak and reward icon set for Bolt, shown at true 24, 32 and 48 px
• A range board that puts the three side by side with a comparison table
• Nubby and Zip, each with a character sheet of four views and eight expressions, a small-size sheet down to 16 px, four coded phone screens (onboarding, empty, offline, streak), five animation clips, a 10.8 s showreel, an interactive web page and a board

How it works

Each mascot is one drawing function. The turnaround, every mood, every scene, the board and every frame of the loop call that same function, so the character stays on model by construction instead of being redrawn by eye. On Bolt the head is treated as a sphere and every face feature has a longitude, so the eyes, ears, crest and back number all turn by the same rule between front, three-quarter, side and back.

Bolt, Nimbus and Marlow are built in Python that writes SVG. Zip and Nubby are JavaScript modules that share one API for drawing, expressions, motion clips, icons and scenes. Their video is rendered on a virtual clock one frame at a time at 60 fps and piped straight to ffmpeg, rather than screen-recorded.

The three loops run 5.0 s (Bolt, 120 frames), 4.5 s (Nimbus, 108 frames) and 5.5 s (Marlow, 132 frames), all 1080x1080 at 24 fps. Each has anticipation, a jump or float with stretch, a squash on landing, secondary motion and blinks. An audit checks every frame for clipping and checks that the last frame meets the first. Each mascot also has a readability floor written down, 48 px for Bolt's head lockup, 32 px for Nimbus's face plate and 48 px for Marlow's jar lockup.

A QA gate measures every cell of every sheet in pixels and fails if a drawing or a line of text spills out. On the last rebuild it passed 231 of 231 cells across eight sheets, and the loop audit passed on all three loops.

What we threw away

The first round came back with Bolt working and the other two not. Nimbus was generic and Marlow was awkward, so both were redesigned. Nimbus became a minted coin slab and Marlow a honey jar under a cloth. The first boards also had drawings spilling out of their cells even though the build said containment was verified. The cause was a duplicated SVG transform that dropped the scale. That is why the containment gate now measures pixels.

Smaller things went too. Bolt's first kit, a white shirt with two green bands, read as overalls with braces, so it became a solid green shirt with a V collar. Limbs drawn as separate outlined capsules read as beads, so each limb now merges into one outline with its hand or boot. For Marlow's side view we tried a straighter, shorter arm. It read as a peanut, so the elbow-back arm stayed.