avatarGenerator

Das Problem

Avatare für Nutzer ohne hochgeladenes Bild löst man üblicherweise mit Gravatar oder einem Dienst wie DiceBear. Beides bedeutet: eine externe Anfrage pro Avatar, eine IP-Adresse, die an einen Dritten abfließt, und eine Abhängigkeit, die man nicht kontrolliert. Für eine Seite, die ansonsten kein einziges Byte nach außen schickt, ist das ein absurder Preis für ein 128×128-Pixel-Bild.

Der Ansatz

Der Generator berechnet das Bild selbst — aus nichts als dem Namen.

Die Kette ist kurz und vollständig deterministisch: Der Name wird per NFC normalisiert, damit „José“ in NFC- und NFD-Kodierung denselben Wert ergibt. Daraus berechnet ein FNV-1a-Hash einen 32-Bit-Seed. Dieser Seed initialisiert einen Mulberry32-PRNG, der anschließend — immer in derselben Reihenfolge — jede einzelne visuelle Eigenschaft zieht: Hautton, Frisur, Haarfarbe, Augen, Brauen, Nase, Mund, Bart, Kleidung, Brille, Kopfbedeckung, Ohrring, Sommersprossen, Hintergrundverlauf.

Gleicher Name → gleicher Seed → gleiche Aufrufreihenfolge → identisches Bild. Auf jedem Gerät, in jeder Session, ohne dass irgendwo etwas gespeichert werden müsste.

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

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

Was dabei interessant war

Der aufwendigste Teil war nicht die Zufallslogik, sondern das Gesicht. Ein Kreis mit zwei Punkten sieht nach Platzhalter aus. Die Kopfform ist deshalb aus Bézier-Kurven aufgebaut, mit konsistenten Outlines, weichen Schattierungen und einem leichten Sticker-Schatten — damit zehn Avatare nebeneinander wie ein Set wirken und nicht wie zehn Zufallsergebnisse.

Der zweite nicht offensichtliche Punkt ist die Reihenfolge der PRNG-Aufrufe. Sie ist Teil des öffentlichen Verhaltens: Wird mitten in der Kette eine neue Eigenschaft eingefügt, ändern sich alle nachfolgenden Ziehungen — und damit sämtliche bereits existierenden Avatare. Neue Traits gehören ans Ende.

Einbindung

generateAvatar() gibt einen fertigen SVG-String samt xmlns zurück, der sich direkt in innerHTML oder ein Template schreiben lässt. Für DI-basierte Architekturen gibt es zusätzlich eine dünne AvatarGenerator-Klasse, die Default-Optionen im Konstruktor hält und ansonsten nur delegiert.

Die Live-Demo unten läuft mit genau dieser Datei — nicht mit einer Nachbildung.