Build initial based avatar svg generator with elixir
2019, Mar 28
Abstract: Here we learn how to build default avatar generator. We generate the color based on the hash algorithm of given name and display its initial on top. This kind of default avatar is popularized by google.
When the user sign up for the first time, the application usually give a default avatar before the user change it. Here’s some of those:
Can you recognize which company use those default avatar? Maybe you can recognize snap, slack, and github.
Default avatar used to be boring, just a plain male or female silhouette. But now many company getting more creative with it. In 2015 Google change their default male/female silhouette into initial based avatar in this announcement.
This new initial based avatar have some characteristic:
Eventhough the background color seems random, they compatible each other.
Sama initial doesn’t necessary have the same background color.
Today we will build the code to generate such avatar. If you are following previous article on How to generate pretty color programmatically, you already know how to generate random pretty color to be used as a background. So now we need to make a simple function to generate initials.
Lets specs up some little requirement for our little function:
The function must ignore foreign character
If name with one word given it should output the first letter of that word.
If name with two word given it should output the first letter of both word.
If name with more than to word is siven it should output the first letter of the first and the last word.
Given the specs, here’s a little function we can come up with:
Little additional, it will return “42” if no string are given.
Now we already have enough ingredient to write our avatar generation function. But there’s one more we can add. I hope you find this feature interesting:
Instead of giving random background color each time, to to make the background random for different name but consistent for the same name?
Afterall, avatar is meant to be an identifier right?
Here is where we can use some sort of hash algorithm. The idea is no matter what string is given to that funtion it will consistently return back one color amongst 359 possibility. Here’s a little function requirement:
The function will accept string and return integer between 1 to 359
The same string should produce the same integer consistently
Given two almost similar string should produce entirely different integer.
The last two requirement sounds like a hash algorithm but in this case it must result in very narrow possible output. So here’s the attempt.
As you might see, the function above obviously not optimal. We use md5 hashing algorithm only to get the first 3 character, convert into integer and multiply all 3. Lastly we use modulus/rem function to force it below 360. Let me know if you found a shorter way.
There you have it. All the ingredient required to build your very own initial based avatar generator.
Here’s the complete code including generate SVG file as an output.