Brand direction 04 · vector conversion

Drum

Your learning sidekick.

Your clay render, rebuilt as flat vector — the same loaf body, corner ears and dot eyes, redrawn so it scales down to an app icon, animates in Rive, and ships inside the app at a few kilobytes.

♡Encouraging
☆Curious
▶Clear & supportive
●Always on your side
01 · expressions

Everything happens in the eyes.

No pupils, no eyebrows, no nose. Two dark ovals plus an optional mouth — exactly the register Brilliant works in, and it means the whole emotional range is three shapes changing.

02 · actions

Poses.

Tilt range

the body leans, the shapes don't change

Colour

six, from your sheet
E9573C
F58A6E
FBEBD7
3E2A70
A98CE8
6FC7B4

Two of these do the work: coral is Drum and nothing else on any screen is ever coral. Indigo is every piece of type. Lavender and teal carry UI state, cream is the ground.

03 · it has to survive

App icon to hero, one file.

Size ladder

28 · 40 · 64 · 112px

Below 40px the shading drops out and it renders flat — the ears and the two eyes are all you need to recognise it.

Silhouette & icon

the real test

Solid black, it is still unmistakably Drum. The corner ears carry it — that is the one shape nothing else in this category has.

05 · how this becomes a .riv

You can't write a Rive file. You import into one.

I checked how studios actually do this. There is no text source format for .riv — it is a binary the Rive editor writes. Every workflow online is the same three steps, and step one is what I've just handed you.

01Clean layered vectorIllustrator, Figma or raw SVG, with every moving part on its own layer — head, ears, each eye, each arm. That is the whole requirement, and it is the step people get wrong.
02Import into RiveDrag the SVG onto the canvas, or in Figma right-click → Copy as SVG and paste straight into Rive. Rive preserves the group structure — every shape and path stays editable in the Hierarchy panel. From Illustrator, export with CSS Properties set to Presentation Attributes and "Preserve Illustrator Editing Capabilities" off, or the importer chokes.
03Rig and build the state machineAdd bones for anything that bends, meshes for squash and stretch, then wire the inputs. Drum barely needs bones — the arms and legs are rigid capsules, so it is mostly transforms plus eye and mouth swaps.

What I built the SVGs to avoid

The importer drops or flattens clip paths, gradients, filters and CSS classes. So both files use presentation attributes only, no <defs>, no clipping, and flat fills with opacity instead of gradients. Layer names are set as id on each group — Ear-L, Eye-R-spec, Arm-L — which is what shows up in Rive's Hierarchy panel.

Both are in claude/assets/ and I've sent them to you directly: drum-25d.svg and drum-flat.svg.

04 · built to move

What the vector buys you.

01Eleven shapes, no rasterBody, shade, highlight, four legs, two eyes, mouth, arm. The clay render is lovely key art but it cannot animate at 60fps on a mid-range Android. This can, at a few kilobytes.
02The rig points map to your sheetHead/ears, eyes, body, arms, legs, details — the same six groups you already marked as Rive-ready. Nothing here needs bones; every state is a shape swap or a transform.
03Expression costs three shapesTwo eyes and a mouth, plus a body tilt. That is why the range above was almost free to author, and why it stays on-model no matter who draws the next pose.
04Keep the render for key artApp store, marketing, the loading screen. Vector for anything that moves or gets small. Most character systems run exactly this split — you are not choosing between them.
Coins & XP → Earlier creature →

Brand direction 04 · Drum vector conversion · SVG + CSS, no images · tap Drum to change his mood