Playground

Try all eleven styles below. Change the seed and watch every style change together — same input, eleven different deterministic outputs.

Avatar Styles Preview

Enter a seed value to see how each style generates unique avatars

Seed: Size: 64px

Initials

@avatar-generator/style-initials

Identicon

@avatar-generator/style-geometric

Pixel Faces

@avatar-generator/style-pixels

Rings

@avatar-generator/style-rings

Faces

@avatar-generator/style-faces

Illustrated

@avatar-generator/style-illustrated

Anime

@avatar-generator/style-anime

Abstract

@avatar-generator/style-abstract

Emoji

@avatar-generator/style-emoji

Animals

@avatar-generator/style-animals

Gradient

@avatar-generator/style-gradient

Square shape Transparent background

Note

This embedded playground uses simplified renderers that match each style’s shape, so the page stays dependency-free. Install the real packages for the full output, or use the Configurator to tweak individual options and copy the matching createAvatar() call.

Run the playgrounds locally

The repository ships six Vite playgrounds — one per framework wrapper, plus one for the core API. They import the workspace sources directly, so changes show up immediately.

1. Clone the repository

   git clone https://github.com/hugoogb/avatar-generator.git

2. Install the playground dependencies

   The playgrounds are their own pnpm project, so install from that directory:

   cd avatar-generator/playgrounds && pnpm install

3. Start the one you want

   core

   pnpm playground:core

   react

   pnpm playground:react

   vue

   pnpm playground:vue

   svelte

   pnpm playground:svelte

   angular

   pnpm playground:angular

   web component

   pnpm playground:web-component

4. Open the URL Vite prints in the terminal

To check that all six still build — which CI does on every pull request:

pnpm build:all

Styles you can try

Style	Package	Description
Initials	@avatar-generator/style-initials	Letter initials on colored backgrounds
Geometric	@avatar-generator/style-geometric	GitHub-style symmetrical identicon grids
Pixels	@avatar-generator/style-pixels	8-bit retro pixel faces
Rings	@avatar-generator/style-rings	Concentric rings, segmented and dashed variants
Faces	@avatar-generator/style-faces	Minimal flat geometric faces
Illustrated	@avatar-generator/style-illustrated	Detailed cartoon faces with accessories
Anime	@avatar-generator/style-anime	Anime/manga-inspired faces with expressive eyes
Abstract	@avatar-generator/style-abstract	Mondrian/Kandinsky/Bauhaus-inspired compositions
Emoji	@avatar-generator/style-emoji	Yellow emoji-style expressive faces
Animals	@avatar-generator/style-animals	Cute animal avatars (cat, dog, fox, panda, …)
Gradient	@avatar-generator/style-gradient	Smooth gradients with pattern overlays

Every style produces a deterministic avatar from the seed you give it: the same seed always returns the same SVG.