ribbit

ribbit.

Deterministic generative avatars and Canvas marks from any seed. A tiny, zero-dependency engine with no stored images and no network requests.

$bun add ribbit-canvas

Three ways to read the same field.

Every pattern samples one seeded value field. Switch the lens, keep the seed.

dither

reed

An ordered Bayer dither over a layered value field. Crisp, print-like, tonal.

glyph

spore

The same field sampled into monospace glyphs. Reads like a quiet data console.

wave

brook

Seven stacked wave layers, dark to light. Soft horizons over the pond.

A field with no edges.

A small collection of stable seeds. Hover any mark to bring it to life.

croak
marsh
lily
frogspawn
reed
pond
null-frog
ripple
moss
spore
heron
bog
fen
cattail
murk
glint
brook
algae
dragonfly
mire
willow
dew
fern
wisp
gloam
brack
ribbit-1
sedge
moss-2
nixie

Tune one, take it with you.

Change the seed, pattern, palette and format, then export a circular avatar or a 1200×630 OG image.

format
shape
pattern
palette
animate

Frequently asked questions

Everything needed to use Ribbit as a deterministic avatar generator or a generative media engine.

Is Ribbit free to use?

Yes. Ribbit is open source under the MIT license and can be used in personal and commercial projects.

Does Ribbit make network requests?

No. Marks render locally in Canvas or SVG. There is no image API, upload pipeline or remote asset to fetch.

Can I generate images without a browser UI?

Yes. toSVG returns a standalone SVG on the server or in the browser. PNG and WebM helpers need browser Canvas APIs.

How does a seed become a stable avatar?

Ribbit hashes a string or number into a deterministic seed. The same seed, options and package version render the same mark every time.

Does Ribbit work with React and Svelte?

Yes. Ribbit ships compact avatar adapters for React 18+ and Svelte 5, plus a framework-agnostic Canvas engine.