Meet the Noggins.

npm install seedkin

pnpm add seedkin

yarn add seedkin

bun add seedkin

import { noggin, nogginDataUri } from 'seedkin/noggin';

// An SVG string, to inline
const svg = noggin(user.id);

// A data: URI, for an img src or CSS url()
const src = nogginDataUri(user.id, { size: 40 });

import { nogginDataUri } from 'seedkin/noggin';

export function Avatar({ id, size = 40 }) {
  return <img src={nogginDataUri(id, { size, title: null })} alt="" width={size} height={size} />;
}

<img data-seed="ada" alt="" width="48" height="48" />

<script type="module">
  import { nogginDataUri } from 'https://cdn.jsdelivr.net/npm/seedkin@2/dist/styles/noggin/index.js';

  for (const img of document.querySelectorAll('img[data-seed]')) {
    img.src = nogginDataUri(img.dataset.seed, { size: img.width, title: null });
  }
</script>

import { noggin } from 'seedkin/noggin';

// GET /avatar/:id, as an image any page can use
export async function GET(_request, { params }) {
  const { id } = await params;
  return new Response(noggin(id, { size: 96 }), {
    headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'public, max-age=31536000, immutable' },
  });
}