Pixel-Art Avatar Generator In JavaScript

Pixel-Art Avatar Generator In JavaScript

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

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 

};

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

};

Changelog:

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

Download Details:

Author: DiceBear

Demo: https://avatars.dicebear.com/

Source Code: https://github.com/DiceBear/avatars

javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

Introduction With Basic JavaScript

Introduction With Basic JavaScript - Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.