Recipe

Avatar + identicon design

Deterministic user avatars from a hash — no storage, no uploads.

Ingredients

  • SHA-256 of user ID or email
  • 5×5 grid of on/off cells (first 25 bits)
  • Mirror horizontally for symmetry
  • HSL color from remaining hash bytes
  • Canvas or SVG renderer

Steps

  1. Hash the input string with SHA-256.
  2. Take bits 0–24 as a 5×5 boolean grid. Mirror columns 0–1 onto columns 3–4.
  3. Extract hue from bits 25–33 (0–360°), fix saturation at 65%, lightness at 55%.
  4. Render filled squares for each true cell on a 64×64 canvas or SVG viewBox.
  5. Round outer corners slightly. Export as PNG data URI or inline SVG.

Why this works

Identicons are collision-resistant enough for user-facing differentiation. The 5×5 mirrored grid produces 2^15 unique patterns. Combined with a 9-bit hue space, you get ~8.3M distinct avatars — plenty for most apps. No external service, no GDPR headache.

Variants

  • 6×6 grid with 3-column mirror for more detail
  • Add a background shape (circle, hexagon) behind the grid
  • Use two-tone fills per cell for depth
  • Animate grid cells on hover with CSS transitions
← Back to docs