Seeded Identity Mark
Turns any string into a symmetric geometric logo that is byte-identical on every render, forever.
- Category
- Assets
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useMemo } from "react";
/**
* A deterministic identity mark derived from a string.
*
* Two constraints carry the whole thing.
*
* DETERMINISM — every value comes from an integer hash of the seed, never
* Math.random. These marks render on the server; a random one produces a
* hydration mismatch, and worse, a user's avatar would change on every reload.
*
* SYMMETRY — a grid of independently random cells does not read as a mark, it
* reads as a QR code. Generating only a half (or a quadrant) and reflecting it
* is what turns noise into something the eye accepts as a glyph.
*/
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this asset
Generative avatars are a solved problem that almost every implementation still gets wrong in the same three ways. The first is reaching for Math.random, which on a server-rendered page is a hydration mismatch and, more importantly, means a user's mark changes every time they reload — the one thing an identity mark must never do. Everything here comes from an FNV-1a hash of the seed feeding an xorshift stream, so the same string yields the same mark on any machine, forever. The second is filling the grid with independent coin flips, which produces something that reads as a QR code rather than a glyph; generating one half and reflecting it, over an odd-sized grid so there is a real centre column to hang the design on, is what makes the eye accept it as a mark. The density is also graded from sparse at the edges to dense at the spine rather than flat, because a uniform fill is mush. The third is colour: letting the seed choose a full HSL triple regularly lands on a yellow that disappears against its own plate. Only the hue is seeded here; saturation and lightness are fixed, which guarantees every possible input produces something readable. Finally, draws that come out nearly empty or nearly solid are rejected and re-rolled from a salted seed — still deterministic, just a different draw.
Curator’s note
The re-roll on degenerate draws is the bit people skip — without it roughly one seed in twenty renders an empty square.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Wave Ribbon Band
backgroundsLayered SVG line-work flowing from two incommensurable sine waves.
Stroke Draw Button
componentsA button whose outline draws itself around the shape on hover, at any size.
Progress Arc Gauge
componentsAn SVG arc gauge with a needle and a readout that counts to its value.