I built picotile — type a name, get a unique dithered dot avatar (deterministic, zero dependencies)
Live demo: Live demo Github: Code I kept noticing that most identicon libraries produce kind of forgettable avatars, so I made one with a look I actually like. picotile takes a name and a seed and returns a two-tone dit
Live demo: Live demo
Github: Code
I kept noticing that most identicon libraries produce kind of forgettable avatars, so I made one with a look I actually like. picotile takes a name and a seed and returns a two-tone dithered dot tile. The same name always produces the exact same avatar, so you can generate user avatars on the fly without storing any images.
The pattern comes from ordered (Bayer) dithering — dense areas fill into solid shapes, sparse areas fade out, with a clean half-tone band in between. There are four shapes it can take: linear, radial, sweep, and ripple.
Some bits I'm happy with:
- Zero dependencies, works in Node or the browser, TypeScript
- Output is just an SVG string, so it works server-side or at build time
- There's a CLI:
npx picotile "Ada Lovelace" - You can pull the raw dot coordinates and render them however you want
It's one of my first published npm packages, so I'd really appreciate honest feedback — on the code, the docs, or just whether the avatars look good to you.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.
