WingNews logo WingNews GitHub [2]
top | item 27311964

Boring Avatars – React library to generate custom avatars

375 points| arnklint | 4 years ago |boringavatars.com | reply

93 comments

order
[+] IgorPartola|4 years ago|reply
Not to hijack this (I have zero affiliation with this project), but RoboHash has been my absolute favorite version of this: https://robohash.org/
[+] fouc|4 years ago|reply
I recognize robohash from gravatar mainly.

https://en.gravatar.com/site/implement/images/

Gravatar provides 5 fallback custom avatars:

  identicon: a geometric pattern based on an email hash
  monsterid: a generated 'monster' with different colors, faces, etc
  wavatar: generated faces with differing features and backgrounds
  retro: awesome generated, 8-bit arcade-style pixelated faces
  robohash: a generated robot with different colors, faces, et
[+] nickjj|4 years ago|reply
They look cool but aren't avatars mainly used to uniquely identify someone based on a picture?

A lot of these look too similar. The really boring approach IMO is to choose a random solid color and put the user's initial(s) on top of it. This makes it pretty unique and much easier to associate someone back to their avatar.

[+] Mordisquitos|4 years ago|reply
> The really boring approach IMO is to choose a random solid color and put the user's initial(s) on top of it. This makes it pretty unique and much easier to associate someone back to their avatar.

I agree that it's a good simple baseline, but going on a minor off-topic rant, I find it very annoying when this is implemented under the anglocentric assumption of names always being of the format Firstname (Middlename) Surname everywhere, and thus always parsing the initials as "FS". As a result, Spanish people whose naming custom is Firstname(s) 1stSurname 2ndSurname, where the 2nd surname is the "droppable" one, are inappropriately rendered. Director Pedro Almodóvar Caballero becomes "PC", rather than the acceptable versions "PA" or "PAC".

[+] shagie|4 years ago|reply
The sunset pattern are... even less distinctive.

Aside from identicons (which I think work rather well), I believe that a large Mondrian style image with a random circle on it that is then rotated, and scaled to the appropriate size (and cropped if constrained to a rectangle).

This allows for an image that attempts to avoids problem with color vision.

The issue that I had with the Boring Avatars is that too many of them were the same. Switching to ring or sunset had many identical ones. The Bauhaus version had a limited pallet so that the same three colors occurred frequently and only distinctions were in orientations of objects which weren't that distinctive themselves.

The amount of uniqueness per image in this is rather low. The solid color and letter you mentioned has more easy to identify uniqueness.

[+] awb|4 years ago|reply
There are only 676 unique 2 letter pairs or 17.5k 3 letter letter initial triplets, and initials aren’t evenly distributed so there’s a ton of non-uniqueness in that approach for a platform with millions of users.
[+] Thomaschaaf|4 years ago|reply
"Beam" should be the default style instead of "marble".
[+] leoedin|4 years ago|reply
I think if the goal is to be distinguishable, then only Beam (and maybe Bauhaus) meet that. To me at least, the different marbles are forgettable - if the goal of an avatar is to appear next to a name and help me realise it's the same person who also wrote that other post, or a different comment, or the OP, then they need to be individually distinct enough.

Beam definitely meets that criteria (there's nothing like faces to trigger your brain's distinguishing algorithm), and Bauhaus could do (although I'd add a few more colours into the mix, and maybe not use all of them in every avatar).

The rest really don't.

[+] gvx|4 years ago|reply
Faces for avatars are almost always better than other options. We humans are really good at recognising faces, even cartoony or abstract ones, which helps users remember other users by their avatars.

Some people are visually impaired or face-blind so this shouldn't be the sole means of identifying users, but for most of us, avatars are really important. There are people who I know from online fora that I haven't visited in years but I still remember exactly what their avatars looked like.

[+] city17|4 years ago|reply
The designs are really nice, but I feel they should be more differentiated. Otherwise you can't recognize a particular person by their avatar and you might as well use identical ones for all of them.
[+] awb|4 years ago|reply
People are good at remembering faces, but this is for people who don’t want to use their face. I don’t think the goal is to be memorable, just an easy way to be mostly unique.
[+] NohatCoder|4 years ago|reply
Why make a library dependent on a particular framework? Seems to just limit usefulness for no particular gain.
[+] kashug|4 years ago|reply
If I create a library I would usually make it to solve my own usecase. And if you mainly work with react-apps, and your plan is to use it in an react app. Why not also make the library in react?

In this case, I guess the developer wanted to use JSX to create it. And you could ofc use JSX without React. But most people are used to using it in react-context, and plan to use it in an react-app anyway.

So to answer your question, in my eyes it would be. Why not? If the devs plan on using it in react-app anyway, it's not their job to make sure it supports everyone elses usecase.

[+] arnklint|4 years ago|reply
"Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette."
[+] Eric_WVGG|4 years ago|reply
sigh. Still hate that Twitter switched to round avatars. Too limiting.
[+] sgallant|4 years ago|reply
Love the list of sample names!!

https://notablewomen.withgoogle.com/all

[+] frankfrankfrank|4 years ago|reply
So instead of just producing a set of notable people, they went with excluding men. I am not sure how we will ever achieve the supposed goals when they all seem to just be lip service and not about equality at all. How is this equal?
[+] pandemic_region|4 years ago|reply
The generated avatars are very pleasing to the eye, excellent work!

I was hoping though to enter my name somewhere on that page to test it out, as I have negative infinity js skills :-/

[+] asutekku|4 years ago|reply
It seems you can edit any name of the avatars, creating a custom one.
[+] btbuildem|4 years ago|reply
I share the common setiment from the comments: the avatars are hard to tell apart, which means they fail in their purpose as quick visual identifiers.

I've dabbled with this in the past, what I found very helpful was symmetry -- this works especially well with abstract shape ones. Generate a piece, then mirror it horizontally (or vertically, or both). I found this kind of visual redundancy made the glyphs more attractive to look at, and more distinct / easier to tell apart.

[+] codeulike|4 years ago|reply
My favourite was the Stackoverflow April Fools Unicorn avatar generator from a few years ago but I'm not sure if they ever released the source

https://meta.stackexchange.com/questions/37328/my-god-its-fu...

[+] shagie|4 years ago|reply
https://unicornify.pictures (see also https://news.ycombinator.com/item?id=24281401 )

> If you want bigger and/or higher-quality images, the avatar generation code (including a command-line app) is at https://bitbucket.org/balpha/go-unicornify.

The code appears to have been migrated to GitHub at https://github.com/codingisacopingstrategy/unicornify and the about page on https://web.archive.org/web/20100428132341/http://unicornify...

The code is also at https://bitbucket-archive.softwareheritage.org/projects/ba/b...

[+] nc|4 years ago|reply
Incredible work! I'd pay for additional packs and also for a list of artists to come up with custom ones. (was just looking for this the other day). Every B2B SaaS and consumer product on the planet either needs to pay an illustrator/designer to create these... or perhaps use your product? :)
[+] thekyle|4 years ago|reply
I really like the "beam" ones.
[+] ivyirwin|4 years ago|reply
I really like this. We've attempted similar ideas on projects before based on first/last initial and it never turned out like I wanted. I like the simplicity of your execution and the range of styles you created. I get that some of the feedback is about them being too close together, but for practical applications, I think you would see enough variation in a small subset for it to be effective. Well done!
[+] royletron|4 years ago|reply
Implemented them into our platform this morning! Love them. We have a space/aurora type theme so the marbles with the right color scheme look great - we only use them as fallback if users don't provide their own.
[+] new_here|4 years ago|reply
Awesome work! I was wanting to build a library like this myself but you've executed it way better! You should try to build and charge for a web API for this to let communities auto-generate avatars for their new users.
[+] hanniabu|4 years ago|reply
Anybody know of a library that generates similar style images that can be used for larger dimensions? My goal would be to use this for blog cover backgrounds with title text imposed over it.