Avataaars Web Component

A dependency-free custom HTML element rendering beautiful custom avatars recursively from the compiled SVG library using native Shadow DOM and ES Modules.

Avatar Settings
Enable Animations

Interactive Customizer

Observed Serialization Hash

---

Use Case Variations

Static Avatar

Renders standard inline graphics without triggering CSS animation keyframes.

Render from Hash

Configured using a single compact 15-character Base-62 hash attribute.

Dynamic Randomizer (JS)

Randomly coordinates styling attributes via JS (avoiding color clashes).

randomize Attribute

Randomly assigns unspecified properties declaratively on initialization.

<avataaars-randomize>

Enables randomization dynamically via a nested sub-element.

Layered Pieces

Composed by absolute-positioning individual <avataaars-piece> elements.

Sub-components (<avataaars-piece>)

Hat Piece
Eyes Piece
Clothe Piece
Mouth Piece