AvatarMark

Data display · src/components/AvatarMark/AvatarMark.tsx

A generated mark for someone with no picture: the gateway, in one of nine accent families.

The threshold sits at the same height on every mark, with the same three faces behind it. Only the colour family varies, derived from the name - a set of avatars whose diagonals sat at different angles would read as a rendering bug, not as a family.

The faces are drawn before the lit wedge so the wedge covers anything past the seam, and each face is inset 5px so all three stay inside the circular crop.

The initial sits left of centre, not centred. The lit wedge is on the right, so optical balance and seam clearance want the same few pixels. CJK sets larger and without the negative tracking, because one Hangul syllable is a full em where two Latin caps are not.

Import

import { AvatarMark } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
name	string	The name the mark is generated from, and the source of its initial.
seed	string | number	Overrides the name as the hash input, so a mark can stay put when a name changes.
family	(typeof MARK_FAMILIES)[number]	Pin the accent family instead of deriving it.
label	string	Names the mark. Without it the SVG is decorative and hidden.
className	string