Author: | HB0N0 |
---|---|
Views Total: | 5,412 views |
Official Page: | Go to website |
Last Update: | April 27, 2021 |
License: | MIT |
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