Graphics
Blobs, avatars and placeholder images, all as SVG. A few hundred bytes each, sharp at any size, and generated in the page rather than fetched from a service.
- Blob Shape GeneratorOrganic shapes, as SVG, a few hundred bytes each.
- Initials Avatar GeneratorA name in, a readable avatar out.
- Placeholder Image GeneratorAny size, labelled, and no request to anyone.
About graphics
These three all make the same trade and it is the right one: SVG rather than PNG. They are flat shapes and text, they need to scale, and an SVG is a few hundred bytes where the raster equivalent runs to tens of kilobytes at one size and has to be regenerated for every other.
The placeholder image is the clearest case. The usual approach is a service that generates one from a URL, which means every page view fetches an image from someone else's server, and that server learns which pages you are building. Generating it here costs one download and no requests at all afterwards.
Avatars are built to stay readable. The background colour is derived from the name in a perceptual colour space at a fixed lightness, so every generated avatar carries the same visual weight instead of the set having a yellow that glares and a blue that disappears. The initials then take whichever of black or white actually reads on that background, which is measured rather than assumed: the naive version, always white, drops to 3.4 to 1 on mid greens and fails accessibility outright.
The blob generator uses cubic curves with tangent handles at each node, which is what keeps the outline smooth all the way round instead of showing a corner where the path closes. At zero variation it is a circle to within a fraction of a pixel, which is the check that the curve maths is right.
Randomness comes from the same cryptographic source the password generator uses. It is a decorative shape and it does not need that, but two randomness paths in one codebase means a rule that holds only where someone remembered it.