An Open Letter to Boring Avatars Everywhere — Meet Foxes
You’ve probably seen it on many websites: a square grey box containing a shadowy silhouette. Default avatars can create a sense of lifelessness or emptiness, especially when a page has several of them side by side. Several companies have tried to solve this problem by procedurally generating unique avatars for avatar-less users. However, they tend to look somewhat like this.
There’s nothing inherently wrong with the above, but I certainly wouldn’t be able to pick mine out of a lineup. What makes most randomized avatars hard to remember is their abstractness; there’s nothing for a user’s mind to grab onto, to associate with something real.
At Patreon, we’re doing something a little different. We want to prioritize memorability while still having a good amount of variation.
Aside from already being something of an unofficial Patreon mascot, foxes are relatively easy to draw and (sort of) anthropomorphic, both of which are very attractive properties and led to us picking them as our avatars.
What Makes a Fox
A fox head consists of several parts: a head, two ears, two eyes, a nose, mouth, and the white underside (which we called a mask.)
We were initially going to use the HTML Canvas to draw an elliptical head. The easiest way to do so involved using bezier curves and a parameter controlling “angularity”, set to a precise value. We found that varying the value to produce a more angular shape immediately appeared “fox-like”. On the other hand, round faces look more mouse or rabbit-like.
But variation is still all-important, so we allow the “angularity” to vary within certain bounds.
Fur color is also important. Foxes can be many colors, but seldom do we see a purple fox in real life. To generate random colors within boundaries, we highly recommend using HSL rather than RGB, since the parameters translate more directly to human perception. Based on highly rigorous Google Images research, we determined that foxes’ hues are roughly in the range 5 to 50, or between red and yellow, with some variations in lightness and saturation.
Generation
Broadly speaking, our algorithm is divided into two parts: description and rendering. We created a Fox object that has a head object, ears object, nose object, etc. Each of these objects describes itself based on some (possibly random) values, for instance:
// psuedo-code (faux-code)nose = { // nose is always centered horizontally, no variation here x: head.width/2, // nose is always below eyes, between 20-40% the rest of the way down the face y: (eyes.y + random.between(0.2, 0.4) * (head.height - eyes.y)), // width and height vary between 3-4% of the head's width width: random.between(0.03, 0.04) * head.width, height: random.between(0.03, 0.04) * head.width}
The whole Fox object is passed to the renderer, which knows how to draw a Fox given its description. I won’t bore you with that code but it involves a lot of coordinate arithmetic, bezier curves, and sadness.
One cool thing is that we seed our random number generator with the person’s user id, meaning that a particular person will always map to the same fox. With 21 parameters and (conservatively) 10 distinguishable states per parameter, the number of possible foxes is in the ballpark of 10²¹, which for our use case is basically infinity. So we will probably not see any repeat foxes anytime soon.
Luke Davis and I enjoyed working on this project, and we hope that you enjoy the foxes! Our hope is that these avatars will not only make the site look prettier, but will also remind users that they are unique individuals within an incredible community.
