ⵗsvelte

use it

1<script>2  import { Glorpie } from 'glorpies/svelte';3 4  let { user } = $props();5</script>6 7<Glorpie name={user.email} size={40} label={user.name} />

Takes every option as a prop, plus class and onError. Ships as .svelte source, compiled by your app's Svelte, so it works in Svelte 4 and 5.

on your own canvas

The glorpie action runs a face on any canvas. The canvas is sized by CSS; the backing store follows its size and the device pixel ratio.

1<script>2  import { glorpie } from 'glorpies/svelte';3</script>4 5<canvas use:glorpie={{ name: 'agent-47', look: 'gouache' }} style="width: 240px; height: 240px"></canvas>

sveltekit

No configuration. On the server the component renders a placeholder in the face's background colour, at its final size; it paints after hydration.

errors

1<Glorpie name={user.id} onError={(error) => report(error)} />

Without onError, a failed paint goes to console.error.