avatarGenerator

Das Problem

Platzhalter-Avatare für Nutzer ohne eigenes Bild kommen meistens von Gravatar oder DiceBear. Das bedeutet eine externe Anfrage pro Avatar, die IP-Adresse des Besuchers bei einem fremden Dienst und eine Abhängigkeit, über die man selbst nicht bestimmt. Für ein Bild von 128×128 Pixeln ist das ziemlich viel.

Wie es funktioniert

Der Generator rechnet sich das Bild selbst aus, allein aus dem Namen.

Zuerst wird der Name nach NFC normalisiert, damit „José“ in NFC- und in NFD-Kodierung denselben Wert ergibt. Ein FNV-1a-Hash macht daraus einen 32-Bit-Seed, der einen Mulberry32-PRNG initialisiert. Dieser zieht dann in immer gleicher Reihenfolge jede sichtbare Eigenschaft: Hautton, Frisur, Haarfarbe, Augen, Brauen, Nase, Mund, Bart, Kleidung, Brille, Kopfbedeckung, Ohrring, Sommersprossen und den Hintergrundverlauf.

Gleicher Name, gleicher Seed, gleiches Bild. Auf jedem Gerät und in jeder Session, ohne dass dafür irgendwo etwas gespeichert wird.

import { generateAvatar } from './avatarGenerator.js';

const svg = generateAvatar('John Doe', { size: 128 });
document.getElementById('avatar').innerHTML = svg;

Das Gesicht

Aufwendiger als die Zufallslogik war das Gesicht selbst. Ein Kreis mit zwei Punkten sieht nach Platzhalter aus, also besteht die Kopfform aus Bézier-Kurven, mit einheitlichen Konturen, weichen Schattierungen und einem leichten Sticker-Schatten. So wirken zehn Avatare nebeneinander wie ein Set und nicht wie zehn zufällige Ergebnisse.

Beim Erweitern gibt es dafür eine Einschränkung: Die Reihenfolge der PRNG-Aufrufe gehört zum öffentlichen Verhalten der Bibliothek. Wer mitten in der Kette eine neue Eigenschaft einfügt, verschiebt alle folgenden Ziehungen und verändert damit jeden bereits existierenden Avatar. Neue Eigenschaften kommen deshalb ans Ende.

Einbindung

generateAvatar() liefert einen fertigen SVG-String inklusive xmlns, der sich direkt in innerHTML oder in ein Template schreiben lässt. Für Projekte mit Dependency Injection gibt es zusätzlich eine schlanke AvatarGenerator-Klasse, die Standardoptionen im Konstruktor hält und sonst nur weiterreicht.

Die Live-Demo unten benutzt genau diese Datei.