Avatars

A minimal avatar generator built with SvelteKit. Pick a style, tweak it, export it.

---

What it does

Three avatar modes:

• Solid - pick a color, set a border radius, done.
• Gradient - layer multiple color blobs with independent position, blur, spread, and opacity controls. Stack order is adjustable.
• Image - drop in your own photo (HEIC included). Border radius still applies.

Export sizes range from 64px up to 4096px. The exported PNG is rasterized at the correct pixel ratio via html-to-image, so what you see is what you get.

Avatars are shareable via URL. The state for solid and gradient modes serializes into short query params, so you can send someone a link and they'll land on the exact same configuration.

---

Stack

• SvelteKit with Svelte 5 runes
• TypeScript throughout
• html-to-image for PNG export
• heic2any for HEIC/HEIF conversion on the client
• No UI library, components are hand-rolled

---

Getting started

git clone https://github.com/your-username/avatars
cd avatars
npm install
npm run dev

Open localhost:5173.

---

URL sharing

Solid and gradient configurations can be shared via link. The Share button uses the Web Share API if available and falls back to constructing a URL manually.

Query param reference:

Param	Meaning
br	Border radius (0–100)
cc	Solid color hex
bc	Gradient base color hex
b	Blob array (JSON)
cci	Active blob index (Current Color Index)
es	Export size in px

---

Project structure

• AvatarControls.svelte - where most of the logic lives. State for all three avatar modes, export handler, share URL builder.
• Avatars/ - individual renderers (SolidAvatar, GradientAvatar, ImageAvatar), composed through DynamicAvatar based on selected type.
• +layout.server.ts - URL param parsing, so prefill state is ready before hydration.
• utils/avatar.ts - random defaults and blob generation.
• utils/constants.ts - short param → full key map used for sharing.

---