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) using Raphaël, which is the only dependency. Each face is also 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="raphael-min.js"></script>
<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="raphael-min.js"></script>
<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="raphael-min.js"></script>
<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="raphael-min.js"></script>
<script src="faces.js"></script>
<script>
  var face = faces.generate("myDivId");
</script>

Try it on jsFiddle

Download

faces.js