Make an editable SVG character animation with QuiverAI, CoAnimator, and Codex

I saw this animation by @rege_dev on X and asked Codex to teach me how to make something like it. I wanted to be able to change the character’s expressions and timing after it was made.

QuiverAI generated the character as an SVG, an image made of editable shapes. Codex brought it into CoAnimator, then used the animation timeline to add blinks, head tilts, changing expressions, and sound. Keeping the character’s parts separate meant it could move the eyes or tilt the head without regenerating the drawing.

The loop below is the actual result. Along with the eight-second video, I got the source illustration, editable project, and instructions for making another one.

// Adapted timing example, not the original character project.
const duration = 8;

export function poseAt(seconds) {
  const t = ((seconds % duration) + duration) % duration;
  const phase = t / duration;
  return {
    headTilt: 8 * Math.sin(phase * Math.PI * 2),
    eyeScaleY: 1 - Math.exp(-Math.pow((t - 3.2) / 0.09, 2)),
  };
}

// Preview, scrubber, and exporter all call the same function.
// Apply poseAt(seconds) to the independently editable SVG parts.