Press "Enter" to skip to content

Vanilla JavaScript Library For Creating Avatars On The Client or Server-Side

AvataaarsJs use the awesome Avataaars Library by Pablo Stanley (avataaars.com) in any JavaScript application. This project uses parts of the Dicebear Avatars Library to create glyphs in a specific configuration.

If you need functions like generating random avatars from seed-based avatars, check out the DiceBear Avatars library. The main goal is to have all configuration options in one file with a simple, expandable structure.

Avataaars.js is a JavaScript library to create SVG-based avatars with custom skin, top, accessories, facial hair, clothing, eyes, eyebrows, and mouth on the page.

svg avatar maker, vector avatar maker from photo, svg avatars generator wordpress plugin, abstract avatar generator, generate avatar api

How to make use of it:

1. Put the JavaScript file avataaars.js on the web page.

<script src="avataaars.js"></script>

2. Create a brand new SVG avatar. Default choices:

var svg = Avataaars.create({
    skin: "tanned",
    top: "shortWaved",
    hairColor: "auburn",
    hatColor: "blue02",
    accessories: "none",
    accessoriesColor: "black",
    facialHair: "none",
    facialHairColor: "auburn",
    clothing: "shirtCrewNeck",
    clothingGraphic: "pizza",
    clothingColor: "black",
    eyes: "default"
    eyebrows: "defaultNatural",
    mouth: "default"
});

3. Specify the avatar measurement.

var svg = Avataaars.create({
    width: "300",
    height: "300"
});

4. Determine the avatar style: Circle (default) or Transparent.

var svg = Avataaars.create({
    style: "transparent"
});

5. Customize the avatar color.

var svg = Avataaars.create({
    background: null,
    svgBackground: "tranparent"
});

6. Get avatar info.

Avataaars.paths
Avataaars.paths.clothing
Avataaars.colors

Customizable SVG Avatar Generator, AvataaarsJs Plugin/Github


See Demo And Download

Official Website(HB0N0): Click Here

This superior jQuery/javascript plugin is developed by HB0N0. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.