MugFace

Deterministic SVG avatars generated from any string. Bold, expressive, and infinitely scalable.

Inspired by FaceHash.

// 1. Install
npm install mugface

// 2. Import & Use
import { MugFace } from 'mugface';

<MugFace name="Alice" />

Name (Required)

Seed

Emotion

Radius

Interactive Props

See how each parameter deterministically alters the generated avatar.

type: string (required)

The core input string. Every unique string generates a completely unique combination of colors, shapes, and facial features.

name="Alice"

name="Bob"

name="Charlie"

name="Dave"

type: number (default: 0)

Provides variations for the exact same name. Useful if you want to keep the username but cycle through different avatar looks.

seed={0}

seed={1}

seed={42}

seed={99}

type: 'neutral' | 'happy' | 'sad' | 'anxious'

Overrides the randomly hashed expression to force a specific emotional state while maintaining the user's unique colors and shapes.

emotion="neutral"

emotion="happy"

emotion="sad"

emotion="anxious"

type: number (0 - 50)

Overrides the randomly hashed background shape. 0 creates a perfect square, 50 creates a perfect circle.

borderRadius={0}

borderRadius={15}

borderRadius={30}

borderRadius={50}