faces.js

A JavaScript library for generating vector-based cartoon faces

To load new random faces, click here or press "r" on your keyboard.

faces.js is a JavaScript library that generates and displays cartoon faces, somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as scalable vector graphics (SVG). Each face can also be represented by a small JavaScript object, which allows you to store that object and then draw the same face again later.

As you can probably tell, the number of options for each facial feature (eyes, nose, mouth, etc.) is fairly limited, and some of the current options are fairly crude. So fork it on GitHub and add some new options!

Usage

1. Display a randomly-generated face (the size of #myDivId determines the size of the displayed face):

<div id="myDivId"></div>
<script src="faces.js"></script>
<script>
  faces.generate("myDivId");
</script>

Try it on jsFiddle

2. Generate and save a random face object without displaying it:

<script src="faces.js"></script>
<script>
  var face = faces.generate();
</script>

Try it on jsFiddle

3. Display a saved face object:

<div id="myDivId"></div>
<script src="faces.js"></script>
<script>
  faces.display("myDivId", face);
</script>

Try it on jsFiddle

4. Combining 2. and 3. into one line, generate and save a random face object while displaying it:

<div id="myDivId"></div>
<script src="faces.js"></script>
<script>
  var face = faces.generate("myDivId");
</script>

Try it on jsFiddle

Download

faces.js

Fork me on GitHub