Pixel-Art Avatar Generator In JavaScript – Avatars

Category: Javascript , Recommended | November 22, 2020
Author: DiceBear
Views Total: 97 views
Official Page: Go to website
Last Update: November 22, 2020
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

# human
$ npm install @dicebear/avatars-human-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');

Global options.

let options = {

    // Global options
    // border radius
    radius: 0,

    // return avatar as base64 data uri instead of XML
    base64: false,

    // width/height of the avatar
    width: null,
    height: null,

    // margin
    margin: 0,
    
    // background color
    background: null,
    
    // user-Agent for legacy browser fallback
    userAgent: window.navigator.userAgent,
    
    // Avatar options Here
    // See Below
    
};

male-sprites & female-sprites options.

male female sprites

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

identicon-sprites options.

avatars-identicon-sprites

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

    // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
    colorLevel: 600
    
};

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 = {

    // background color
    background: string,

    // transparent, circle
    style: 'transparent',

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

    // 'longHair' | 'shortHair' | 'eyepatch' | 'hat' | 'hijab' | 'turban'
    top: [],

    // in percent
    topChance: 100,

    // 'black' | 'blue' | 'gray' | 'heather' | 'pastel' | 'pink' | 'red' | 'white'
    hatColor: [],

    // 'auburn' | 'black' | 'blonde' | 'brown' | 'pastel' | 'platinum' | 'red' | 'gray'
    hairColor: [],

    // 'black' | 'blue' | 'gray' | 'heather' | 'pastel' | 'pink' | 'red' | 'white'
    accessories: [],

    // in percent
    accessoriesChance: 10,

    // 'black' | 'blue' | 'gray' | 'heather' | 'pastel' | 'pink' | 'red' | 'white'
    accessoriesColor: 'blue',

    // 'medium' | 'light' | 'majestic' | 'fancy' | 'magnum'
    facialHair: null,

    // in percent
    facialHairChance: 10,

    // 'auburn' | 'black' | 'blonde' | 'brown' | 'pastel' | 'platinum' | 'red' | 'gray'
    facialHairColor: [],

    // 'blazer' | 'sweater' | 'shirt' | 'hoodie' | 'overall'
    clothes: [],

    // 'black' | 'blue' | 'gray' | 'heather' | 'pastel' | 'pink' | 'red' | 'white'
    clothesColor: [],

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

    // 'angry' | 'default' | 'flat' | 'raised' | 'sad' | 'unibrow' | 'up' | 'frown'
    eyebrow: [],

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

    // tanned' | 'yellow' | 'pale' | 'light' | 'brown' | 'darkBrown' | 'black'
    skin: []

};

jdenticon-sprites options.

jdenticon-sprites

let options = {

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

    // 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: []

};

gridy-sprites options.

gridy-sprites

let options = {

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

    // Force deterministic output
    deterministic: false

};

initials-sprites options.

initials-sprites

let options = {

    // amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
    backgroundColors: [],

    // background color
    // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
    backgroundColorLevel: 600,

    // font size
    // Number between 1 and 100
    fontSize: 50,

    // Number between 0 and 2
    chars: 2,

    // bold?
    bold: false

};

avatars-human-sprites options.

avatars-human-sprites

let options = {

     mood: ['happy', 'sad', 'surprised']

};

Changelog:

v4.4.1 (11/22/2020)

  • @dicebear/avatars-avataaars-sprites Graphic shirt “selena”

v4.4.0 (11/11/2020)

  • @dicebear/avatars-avataaars-sprites: New option values for facialHair: pastel and gray
  • @dicebear/avatars-avataaars-sprites: New option value for eyebrows: frown
  • @dicebear/avatars-avataaars-sprites: New option accessoriesColor
  • Changed: @dicebear/avatars-avataaars-sprites Completely rewritten to remove the react, react-dom and avataaars dependencies.

v4.3.0 (11/07/2020)

  • Fixed: Text position was wrong in @dicebear/avatars-initials-sprites when a font size was specified.
  • Code sprites are no longer supported. Too CPU intensive for the HTTP API and does not fit into the future vision of the next major release. Use qr-image directly instead.

v4.2.4/5 (07/23/2020)

  • Fixed Types for array options in avatars-avataaars-sprites

v4.2.2/3 (07/22/2020)

  • bugfix

v4.2.1 (06/21/2020)

  • updated package

v4.2.0 (05/26/2020)

  • Update seedrandom package

v4.1.1 (05/14/2020)

  • Update

v4.1.0 (05/09/2020)

  • Added Aliases for width, height, radius, background and margin, to keep the URLs of the HTTP API shorter
  • Added deterministic for gridy avatars
  • Changed Parameter key for the HTTP API flattened. It is now no longer necessary to nest the values in an options object
  • Update topChange to topChance, clarify some documentation
  • Configurator now always generates the smallest possible HTTP-API URL.
  • Reorganized dependencies in the repository.
  • Stackpath CDN configured for HTTP API. Saves 90% traffic to Cloudflare Workers and therefore also unnecessary costs. Unfortunately makes the initial call a bit slower.
  • Fixed: initial avatars were displayed incorrectly in Firefox. Same solution implemented for all browsers.
  • Fixed: Value 0 did not work for chance options in bottts.

04/09/2020

  • v4.0.8

03/22/2020

  • v4.0.5

03/06/2020

  • v4.0.3

08/02/2019

  • avatar packages updated

06/25/2019

  • v3.2.0

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