Deterministic dithered SVG avatars from any seed string. Zero dependencies.

Live playground →

npm install dither-avatar

import { generateDitherAvatar, ditherAvatarDataUri } from 'dither-avatar';

const svg = generateDitherAvatar('alice');
const uri = ditherAvatarDataUri('alice');

import { DitherAvatar } from 'dither-avatar/react';

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

Returns raw SVG markup for the given seed.

Returns a data:image/svg+xml,... URI — safe to use as an <img> src.

Renders an <img> with the avatar as a data URI. Zero XSS risk.

Renders an inline <svg>. Note: uses dangerouslySetInnerHTML.

MIT