Skip to content

Seeded Identity Mark

Turns any string into a symmetric geometric logo that is byte-identical on every render, forever.

Prominimalbrutalist
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.

Preview
viberdy
5×5 · mirror · hash c9950d22
Same string in, same mark out — on the server, on the client, and on every reload.

Props

5
2
Plate
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

Wave Ribbon Band

backgrounds

Layered SVG line-work flowing from two incommensurable sine waves.

backgroundsvgwaves
Trending
New

A button whose outline draws itself around the shape on hover, at any size.

buttonhoversvg
NewPro

An SVG arc gauge with a needle and a readout that counts to its value.

gaugesvgmeter