Avatar Engine

The SanzCloud avatar system is not a folder of finished faces. It is a geometry engine: paired eye rings, a silhouette fit window, expression data, gaze, blink, and state-driven motion.

Expression before decoration

The original vanilla v1 build is a runnable, dependency-free studio with 25 canonical eye expressions, 39 behavioral states, spring morphing, independent gaze, and multiple body shapes. The current project has since moved to a larger React authoring system.

This course study stays faithful to the visual grammar while remaining intentionally hand-authored: two closed eye paths and one mouth path carry the personality. No expression coordinates or engine source were copied.

Reference: avatars/v1 vanilla engine
Production model: 48-point paired eye rings
Motion: Morph, gaze, blink, body state
Course asset: New hand-coded SVG

Build one procedural expression

Edit either eye contour or move the pupil group. The blink is a transform on the eye groups, and the mouth is a single quadratic curve. This is the same production principle as the full engine, reduced to readable SVG.

playground · eyes + mouth rig

Code

<g fill="#0090ff">
    <g class="eye eye-left" transform-origin="130px 103px">
      <path d="M68 105 C72 62 126 54 151 82
        C171 105 143 139 104 135 C82 133 66 122 68 105 Z"/>
      <circle cx="126" cy="103" r="10" fill="#e6f4fe"/>
    </g>
    <g class="eye eye-right" transform-origin="290px 103px">
      <path d="M352 105 C348 62 294 54 269 82
        C249 105 277 139 316 135 C338 133 354 122 352 105 Z"/>
      <circle cx="306" cy="103" r="10" fill="#e6f4fe"/>
    </g>
  </g>

Preview

Live · edit the paths

From study to engine

The production engine stores each eye as a consistently sampled closed ring. Expression changes interpolate point i to point i, while gaze and spherical perspective transform the resulting contours. Shape-specific fit windows then clamp the pair together, preserving the natural gap and preventing a narrow silhouette from turning two eyes into one.

Production idea: keep expression geometry, view transforms, and silhouette fitting separate. Each stage remains testable, and one expression library can serve many avatar bodies.

Concept reference: avatars/v1/README.md and avatars/v1/docs/how-it-works.md. The SVGs on this page are original course artwork and do not copy the engine’s canonical expression dataset.