Pixel-Art Avatar Generator In JavaScript – Avatars

Category: Javascript , Recommended | June 22, 2019
Author: DiceBear
Views Total: 1,895
Official Page: Go to website
Last Update: June 22, 2019
License: MIT

Preview:

Pixel-Art Avatar Generator In JavaScript – Avatars

Description:

Avatars is a JavaScript library to dynamically generate Github-like, SVG based pixel-art avatars for both browser and node.js environment.

How to use it:

Install the Avatars with NPM.

# NPM
$ npm install @dicebear/avatars --save

Install a sprite collection of your choice.

# male
$ npm install @dicebear/avatars-male-sprites --save

# female
$ npm install @dicebear/avatars-female-sprites --save

# identicon
$ npm install @dicebear/avatars-identicon-sprites --save

# initials
$ npm install @dicebear/avatars-initials-sprites --save

# bottts
$ npm install @dicebear/avatars-bottts-sprites --save

# gridy
$ npm install @dicebear/avatars-gridy-sprites --save

# avataaars
$ npm install @dicebear/avatars-avataaars-sprites --save

# jdenticon
$ npm install @dicebear/avatars-jdenticon-sprites --save

Import Avatars and a sprite collection of your choice.

import Avatars from '@dicebear/avatars';
import SpriteCollection from '@dicebear/avatars-male-sprites';

let avatars = new Avatars(SpriteCollection);
let svg = avatars.create('custom-seed');

Generate an avatar.

let options = {};
let avatars = new Avatars(sprites(options));
let svg = avatars.create('custom-seed');

male-sprites & female-sprites options.

male female sprites

let options = {
    mood: ['happy', 'sad', 'surprised']
};

identicon-sprites options.

avatars-identicon-sprites

let options = {
    
    // Distance to the edge of the image
    padding: 0,

    // Background color
    background: #FFF 
    
};

bottts-sprites options.

avatars-bottts-sprites

let options = {
    
    // Possible values: amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
    colors: [], 

    // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
    primaryColorLevel: 600,

    // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
    secondaryColorLevel: 400,

    // in percent
    colorful: 100,
    mouthChance: 100,
    sidesChance: 100,
    textureChance: 50,
    topChange: 100,

};

avataaars-sprites options.

avatars-avataaars-sprites

let options = {

    // transparent, circle
    style: 'transparent' 

    // include or exclude passed options.
    mode: 'include',

    // Possible values: longHair, shortHair, eyepatch, hat, hijab, turban
    top: [],

    // in percent
    topChance: 100,

    // Possible values: black, blue, gray, heather, pastel, pink, red, white
    hatColor: [],

    // Possible values: auburn, black, blonde, brown, pastel, platinum, red, gray
    hairColor: [],

    // Possible values: kurt, prescription01, prescription02, round, sunglasses, wayfarers
    accessories: [],

    // in percent
    accessoriesChance: 10,

    // Possible values: medium, light, magestic, fancy, magnum
    facialHair: null,

    // in percent
    facialHairChance: 10,

    // Possible values: auburn, black, blonde, brown, platinum, red
    facialHairColor: [],

    // Possible values: blazer, sweater, shirt, hoodie, overall
    clothes: [],

    // Possible values: black, blue, gray, heather, pastel, pink, red, white
    clothesColor: [],

    // Possible values: close, cry, default, dizzy, roll, happy, hearts, side, squint, surprised, wink, winkWacky
    eyes: [],

    // Possible values: angry, default, flat, raised, sad, unibrow, up
    eyebrow: [],

    // Possible values: concerned, default, disbelief, eating, grimace, sad, scream, serious, smile, tongue, twinkle, vomit
    mouth: [],

    Possible values: tanned, yellow, pale, light, brown, darkBrown, black
    skin: []

};

jdenticon-sprites options.

jdenticon-sprites

let options = {

    // an array of numbers between 0 and 360
    hue: [],

    // Distance to the edge of the image
    padding: 0,

    // an array of numbers between 0 and 1
    colorLightness: [],

    // an array of numbers between 0 and 1
    grayscaleLightness: [],

    // an array of numbers between 0 and 1
    colorSaturation: [],

    // an array of numbers between 0 and 1
    grayscaleSaturation: [],

    // Any valid color identifier
    background: null  

};

gridy-sprites options.

gridy-sprites

let options = {

    // Use different colors for eyes and mouth
    colorful: false 

};

Changelog:

06/22/2019

  • Add: identicon color & gravatar options

05/22/2019

  • 3.0.7

v2.0.4 (11/06/2018)

  • Fix: Color modification

You Might Be Interested In:


Leave a Reply