Avatar set · web playground and library Live
A set of avatars I drew by hand. Ten faces, each split into eyes and brows, a nose and a mouth, which can be combined freely with a background shape, a colour, an edge and a line weight. Type a name and you get the same face every time.
The drawings
Every avatar is built from these ten drawings and nothing else. No face is generated. When features are combined, whole pieces are moved and scaled into place; the lines themselves are never redrawn or simplified, so each one keeps the wobble it was drawn with.
Combining
Start from one of the originals as it was drawn, or mix them: the mouth from one face, the eyes from another, the nose from a third. Ten background shapes in six colours with ten sets of eyes, noses and mouths gives 60,000 combinations, before the edge and line weight are changed.
Names and seeds
Any text works as a seed. The same seed gives the same face every time, so a site can hand each person an avatar from their user ID without storing an image anywhere. Two different names can land on the same face, and adding drawings in a later version can change which face a name gets, so a site that needs faces to stay put should pin the version.
A copied link carries the seed and every setting, so a face can be shared exactly as it was made.
Using them
avatarSvg(seed) returns a self-contained SVG and avatarDataUrl(seed) an image source. No dependencies, no network, no account.<WonkyAvatar seed="user-123" size={48} />, for React 18 or 19. It needs no stylesheet, so it renders on the server too.Terms for using the drawings and the library have not been published yet. Until they are, the site is for trying the faces out.