Customizable SVG Avatar Generator In JavaScript – Avataaars.js

Preview:

Description:

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

Features:

• skin: tanned, yellow, pale, light, brown, darkBrown, black
• top: dreads01, dreads02, frizzle, shaggyMullet, shaggy, shortCurly, shortFlat, shortRound, sides, shortWaved, theCaesarAndSidePart, theCaesar, bigHair, bob, bun, curly, curvy, dreads, frida, froAndBand, fro, longButNotTooLong, miaWallace, shavedSides, straightAndStrand, straight01, straight02, eyepatch, turban, hijab, hat, winterHat01, winterHat02, winterHat03, winterHat04
• hairColor: auburn, black, blonde, blondeGolden, brown, brownDark, pastelPink, platinum, red, silverGray
• hatColor: black, blue01, blue02, blue03, gray01, gray02, heather, pastelBlue, pastelGreen, pastelOrange, pastelRed, pastelYellow, pink, red, white
• accessories: none, kurt, prescription01, prescription02, round, sunglasses, wayfarers
• accessoriesColor: black, blue01, blue02, blue03, gray01, gray02, heather, pastelBlue, pastelGreen, pastelOrange, pastelRed, pastelYellow, pink, red, white
• facialHair: none, beardLight, beardMagestic, beardMedium, moustaceFancy, moustacheMagnum
• facialHairColor: auburn, black, blonde, blondeGolden, brown, brownDark, pastelPink, platinum, red, silverGray
  clothing string shirtCrewNeck Possible values: blazerAndShirt, blazerAndSweater, collarAndSweater, graphicShirt, hoodie, overall, shirtCrewNeck, shirtScoopNeck, shirtVNeck
• clothingGraphic: skrullOutline, skrull, resist, pizza, hola, diamond, deer, dumbia, bear, bat
• clothingColor: black, blue01, blue02, blue03, gray01, gray02, heather, pastelBlue, pastelGreen, pastelOrange, pastelRed, pastelYellow, pink, red, white
• eyes: squint, closed, cry, default, eyeRoll, happy, hearts, side, surprised, wink, winkWacky, xDizzy
• eyebrows: angryNatural, defaultNatural, flatNatural, frownNatural, raisedExcitedNatural, sadConcernedNatural, unibrowNatural, upDownNatural, raisedExcited, angry, default, sadConcerned, upDown
• mouth: concerned, default, disbelief, eating, grimace, sad, screamOpen, serious, smile, tongue, twinkle, vomit

How to use it:

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

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

2. Create a new SVG avatar. Default options:

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 size. Default: null (auto).

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

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

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

5. Customize the avatar color.

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

6. Get avatar information.

Avataaars.paths
Avataaars.paths.clothing
Avataaars.colors

Changelog:

04/27/2021

• Renamed empty modifiers to none

04/27/2021

• Allow froAndBand to be control using both hairColor and hatColor options