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

Category: Javascript , Recommended | July 10, 2022
Views Total:366 views
Official Page:Go to website
Last Update:July 10, 2022
License:Apache 2.0


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


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 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");

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({
      {race: "white"}


v3.7.4 (07/10/2022)

  • Restore rate of accessories (such as headbands) being present.

v3.7.3 (06/17/2022)

  • Tweak baseball jersey/hat colors

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

You Might Be Interested In:

Leave a Reply