● Zero dependencies · TypeScript · React optional

Deterministic
Dithered Avatars

Generate unique, beautiful SVG avatars from any string. Deterministic output — same seed always gives the same avatar.

GitHub → npm →

Playground

Tweak parameters, preview at multiple sizes, copy config or SVG.

Seed

Grid

Output

Colors

Auto from seed

Density

Render

Invert pattern
Circle clip

Install

Works with any JS runtime — Node, Deno, Bun, browsers.

npm install dither-avatar
bun add dither-avatar
yarn add dither-avatar

Features

Small, fast, and framework-agnostic.

Zero Dependencies

No runtime deps. Pure TypeScript. Tiny bundle. Works everywhere.

Deterministic

Same seed always produces the same avatar. Perfect for user identifiers, keys, or any unique string.

SVG Output

Generates crisp SVG markup or a data URI. Scales to any size without pixelation.

Unique Colors

Hue is derived from the seed hash. Every avatar gets a distinct color pair automatically.

Bayer Dithering

4×4 ordered dithering creates a stylized halftone pattern from a linear density gradient.

React Components

Optional <DitherAvatar> and <DitherAvatarSVG> components via dither-avatar/react.

Usage

Core API — framework agnostic.

// Core (any JS runtime)
import { generateDitherAvatar, ditherAvatarDataUri } from 'dither-avatar';

// Get raw SVG string
const svg = generateDitherAvatar('alice');

// Get data URI for <img src>
const uri = ditherAvatarDataUri('alice');

React components.

// React (optional)
import { DitherAvatar } from 'dither-avatar/react';

function UserProfile({ username }) {
  return <DitherAvatar seed={username} size={48} />;
}

Custom styles.

<DitherAvatar
  seed="bob"
  size={64}
  className="ring-2 ring-white"
  style={{ borderRadius: '12px' }}
/>
Copied!