Meet the Beasties.

npm install seedkin

pnpm add seedkin

yarn add seedkin

bun add seedkin

import { beastie, beastieDataUri } from 'seedkin/beastie';

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

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

import { beastieDataUri } from 'seedkin/beastie';

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

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

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

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

import { beastie } from 'seedkin/beastie';

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