Generate Random Cartoon Avatars With JS And SVG – faces.js

Preview:

Description:

faces.js is a standalone JavaScript library used for generating random, SVG-based, vector shaped cartoon faces for user avatars.

How to use it:

1. Install and import.

# Yarn
$ yarn add facesjs
# NPM
$ npm i facesjs

import * as faces from "facesjs";

2. OR Download and place the JavaScript file faces.js at the bottom of the webpage.

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

3. Generate a random cartoon avatar inside a given container.

<div id="example"></div>

const face = generate();
display("example", face);

4. Get the cartoon avatar as a JS object.

var face = faces.generate("example");
console.log(face);

5. Customize the color of the avatar.

const face = generate({
      body: { color: "yellow" }
});
// or
faces.display("example", face, { 
  body: { color: "yellow" } 
});

6. Specify the race: white, black, asian, or brown.

const face = generate({
      null, 
      {race: "white"}
});

Changelog:

v3.7.2 (03/28/2022)

• Tweak baseball jersey/hat colors

v3.7.0 (03/26/2022)

• Added baseball jerseys and hats

v3.6.0 (08/18/2021)

• Added new football jersey style

v3.5.0 (06/14/2021)

• Added ability to select which facial features to randomize in the editor UI
• Improved Asian skin tones

v3.4.0 (03/18/2021)

• Added some additional jersey options for football and basketball