seedkin

Styles / Sprite Preview

Meet the Sprites.

Wherever the Grid ran hot, wet, stony, breezy or starry, a Sprite came up: a flame with a swaying tip, a wobbly drop, a pebble with a sprout, a gust trailing curls, a ringed planet. Each one has a face. Give one some text and it draws the same Sprite every time, on any machine, with nothing stored. Type anything to meet yours.

    Below 40px it switches to a simpler version of the same Sprite, and animated, it moves the same way.

    Download

    Options

    Same options, more seeds

    Use it

    Install

    npm install seedkin
    pnpm add seedkin
    yarn add seedkin
    bun add seedkin

    Draw one

    import { sprite, spriteDataUri } from 'seedkin/sprite';

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

// A data: URI, for an img src or CSS url()
const src = spriteDataUri(user.id, { size: 40 });
    import { spriteDataUri } from 'seedkin/sprite';

export function Avatar({ id, size = 40 }) {
  return <img src={spriteDataUri(id, { size, title: null })} alt="" width={size} height={size} />;
}
    <img data-seed="ada" alt="" width="48" height="48" />

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

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

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

    Details

    Entry point
    seedkin/sprite
    Status
    Preview A seed's avatar can change in a minor version until it's stable. What Preview means
    Size
    9.5 kB gzipped, with no dependencies
    Parts
    5 elements, 6 eyes, 3 mouths, 26 palettes, on 4 cell shapes
    Small sizes
    A simpler 9x9 sprite below 40px, from the same traits
    Licence
    MIT, art included

    Sprite in the docs

    Options

    Options for sprite()
    OptionTypeDefaultWhat it does
    shape'square' | 'circle' | 'triangle' | 'diamond''square'Cell shape.
    palettenumber | Palettepicked by the seedIndex into Sprite's PALETTES, or a palette object. The seed picks from its element's.
    sizenumber96Width and height in pixels.
    detail'auto' | 'full' | 'small''auto''small' is the simpler 9x9 sprite; 'auto' draws it below 40px.
    showGridboolean | 'auto''auto'Draw the empty grid cells; 'auto' draws them from 40px up.
    look'gapped' | 'flat' | 'inked' | 'soft' | 'soft-inked' | 'sticker''gapped'How the cells are drawn: apart, or merged into flat shapes. See Looks.
    frame'square' | 'rounded' | 'squircle' | 'circle''square'The outline of the background. Outside it the image is transparent.
    backgroundbooleantrueDraw the palette's background.
    animatebooleanfalseFlips through four frames: flames sway, drops wobble, and embers, bubbles and stars drift around it. CSS inside the SVG, still for anyone who asks for reduced motion.
    titlestring | null'Sprite avatar'Accessible name. null marks the image decorative.
    element'fire' | 'water' | 'earth' | 'wind' | 'space'picked by the seedThe element. The rest of the seed stays the same: its form, face and palette choice.