Boring Avatars – React library to generate custom avatars | Hacker News Reader

Boring Avatars – React library to generate custom avatars

boringavatars.com

375 pointsarnklint93 comments

Not to hijack this (I have zero affiliation with this project), but RoboHash has been my absolute favorite version of this: https://robohash.org/

Not to hijack robohash. But hashicon is better:

https://github.com/emeraldpay/hashicon

https://schumanncombo.com/hashicon

I don’t know man, robots are much cooler than color boxes. I think the robots win here.

Agreed -- the problem with most dynamic avatar generators is that all the avatars look basically visually indistinguishable, which pretty much defeats their purpose. I prefer ones like Wavatar and Robohash because they generate unique looking avatars for each user with minimal visual collisions.

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

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.

> 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".

This is why "first name" should be "given name" and "last name" should be "surname". There are many assumptions programmers make about names, but this one is particularly annoying for CJK and other cultures.

I've had the opposite issue in Korea. Several systems expected LastFirst (from my perspective).

Technically it's "implemented" as a javascript library that you can edit and customize to fit your specific needs and use cases.

Just because the default example is based on one set of assumptions does not mean the project is inherently limited or biased.

I was talking from the perspective of the end user of a product, not as a developer making use of a library.

This is something I really appreciate about Faker[1], a library that generates random data to seed your development DB with. It will throw you about as many curveballs than obvious 'happy path' names, addresses, phone numbers and whatnot.

[1]: https://fakerphp.github.com/

I love that library, I use it for Python all the time.

In fact, it has a function to generate random hex colors too, and you can even filter it to only generate darker colors so you can create nice looking random avatar circles with a white text color to ensure you get good contrast ratios without having to worry about doing a YIQ based contrast calculation.

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.

> there’s a ton of non-uniqueness in that approach for a platform with millions of users

Sure but context is everything.

Chances are millions of users aren't all posting in the same thread / post / chat room / etc. at once. There might only be a few dozen or even hundreds of them, and the odds of hitting 2 people with the same name + similar color are really low then. Plus on top of that, some users will have custom avatars they've uploaded to make the sample size even less for running into a collision.

Google also happens to use the random color + first initial pattern too and they have over a billion users. It works, even in a busy Google Doc.

Plus 16.7 million RGB colors, making for quite a few combinations (somewhere around 230 billion).

True,but it's a bit hard to distinguish between #ffffff and #fffffe

It absolutely is. Thankfully we have 200 billion combinations we don't have to use while still covering every person in the world for the next hundreds years or so.

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.

"Beam" should be the default style instead of "marble".

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.

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.

100% agree that faces are easier to remember. But some people might have privacy and/or bias concerns about posting their real photo.

The website has a selection of generated cartoonish faces.

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.

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.

I think the problem is that if you compare one to another (check out the sunset examples) ... they don't look unique.

IMO, when used is real life scenarios actual users would start to find the unique patterns and visuals in each one. It is hard to evaluate this as a passive viewer with no vested interest in any of the names/avatars as they are presented.

Personally, I saw enough general distinctive qualities among them that I felt like if I interacted with a handful of these avatars frequently that I would notice the minor differences easily.

I'd say unique enough to differentiate people within a conversation, which is good enough for a lot of use-cases

Why make a library dependent on a particular framework? Seems to just limit usefulness for no particular gain.

It creates SVGs using React[1], it would be nontrivial to support another view library with this design and if you're going to support only one at initial release React is probably the most popular bet.

[1]: https://github.com/boringdesigners/boring-avatars/blob/maste...

But you could just write that generation in plain JavaScript, React is really just a syntax.

Because they like the syntax? Because it has a nice way of passing properties? Because you can work with pseudo-DOM elements?

It's all open source. If you want a vanilla js implementation go ahead.

I find it a bit sad that the most upvoted reaction to someone's cool little project they wanted to share is the classic HN misguided and overused response of 'React BAD'

There's a reason for that. The web is roughly 90% static pages with JS sprinkled on top(usually jQuery), and 10% SPAs made in various frameworks.

https://w3techs.com/technologies/overview/javascript_library

React is a small part of the web(in terms of the number of people using it commercially) and thus a library written in React isn't terribly useful for most of the market.

And what percetange of those "static pages with JS sprinkled on top" have a need for automatically generated custom avatars?

Quite a few actually! After all they include static pages with comment sections, forums, image boards etc. - all places where you would want to have user profiles and naturally avatars.

> React is a small part of the web(in terms of the number of people using it commercially) and thus a library written in React isn't terribly useful for most of the market.

And why does that matter? The OP is someone's toy project, not an attempt at starting a SaaS company.

I don't think anyone's saying React is bad, they're saying it's weird that this library depends on it.

"You could just write that routine in plain assembly, C is really just a syntax"

I agree with React being a good bet, but looking at the source code at the link, porting the library over to vanilla javascript or vue seems rather simple given it's mostly using JSX and not using an in-depth React feature like hooks.

So now you’re stuck always including React and always rendering your avatars dynamically on the client, even though it’s really just an SVG that is being generated.

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.

Why put it on GitHub and a web page if you don't care about other people's use cases?

I have no problem with people writing code for themselves. But if that is what you do, please don't post on Hacker News about it.

It can still be useful even if it doesn't cover every single corner case.

Very nice, great job!

Here's another fun one: https://getavataaars.com/

This one too https://www.zanorg.net/bouletmaton/

I like robohash

This is a great one, thanks, we may use it for PeerBoard!

would be nice if gravatar supported this

"Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette."

sigh. Still hate that Twitter switched to round avatars. Too limiting.

Like round tables often do, they don't use all the space they take up. It could just be a personal pet peeve.

But I still like this project.

Love the list of sample names!!

https://notablewomen.withgoogle.com/all

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?

This is just a list of notable women. It's not really "excluding men" as much as it is just a different category.

Exactly. Separate but equal.

While not talking about men mathematically excludes them, or logically excludes sets of men, in everyday life this is merely an incidence where men, or famous men, are just not the subject.

When I talk about auto racing I'm not excluding martial artists. I'm just not talking about them because the subject is auto racing.

"When you are accustomed to privilege, equality can feel like oppression." Stephanie Herrera

But has the concept been producing positive results?

It did in this case. Nobody would have batted an eyelash if they had gone with, say, US Presidents, a list which excludes women.

This tweaks on that notion. Somebody got angry about it. That person got downvoted. We all learned a tiny lesson about the ways that women get excluded regularly, and how that would make you feel.

If one particular HN poster learned a lesson that not everybody supports them on "I won't complain about lists that exclude women but I will complain about lists that exclude men, and pretend it's about equality", then that's another tiny bonus. Not a big one, but this is the kind of thing that happens in tiny increments.

Let's say you are in a group of friends who always buy peanuts to snack on during group events. And because they are all into peanuts they don't consider buying anything else. Now one day its your turn to buy snacks. You don't like peanuts but are a cashew fan. To show your friend how you have been excluded you decide to buy only cashews even though you know they all want peanuts. Do you think this is the best way to encourage snack diversity or will it just discourage people from letting you buy the snacks?

so, in your response to frankfrankfrank, help me parse it:

"When you are accustomed to privilege, equality can feel like oppression."

what you are saying is that, now that women are accustomed to their privilege, equality (including men in the field of faces) would feel like oppression again, so best to leave them out?

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 :-/

It seems you can edit any name of the avatars, creating a custom one.

Doh you're right thanks!

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.

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...

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...

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? :)

I've done this one some time ago - https://www.blankjs.com/ you can create your own styles there.

I really like the "beam" ones.

On a same note, similar library I've built (also react, client side only): https://www.blankjs.com/

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!

These are really cool, especially Beam as others have said. It's not quite the same but I came across a really cool interactive blog post doing something similar recently that others might enjoy: https://francoisbest.com/posts/2021/hashvatars

Nice- but personally I prefer Identicons e.g.

https://idbloc.co/blog/product/update/2019/05/09/toggles-ide...

These are basically a hash in visual format.

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.

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.

That sounds a great side project, since some developers might prefer a static svg dynamically created via url like boringavatar.app/[username here].

There's some prior work on this: e.g. https://github.com/lfades/static-tweet and https://github.com/vercel/og-image.

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.

Excellent job.

I especially like Beam and Bauhaus. Beam should definitely be the default.

There should be an option for StyleGAN (i.e https://thispersondoesnotexist.com/)

These look amazing! Great balance of whimsical and sophisticated

I feel like this is how we'll all look in the distant future when we've uploaded ourselves into the singularity.

Excellent! I love the random color palette. I found some 'boring' avatar for my social sites now. Thank you.

Not a boring one. It should be proavatars.

Great idea! But with one color palette for all, it's pretty hard to tell them apart.

Beam needs an "avoid Hitler" algorithm (no straight sloping hair?)

great job, loved the doc UI, also props for using notable women!

cursed idea: use that one picrew you know the one

An awesome avatar library would be one that searches the internet for an image that closely matches a user, maybe apply some filters too and face recognition cropping too.

This would be very helpful library but the react is huge limitation.

Please remove react so more people could use it :)

it's open source you could just fork it and make a version without react. I think it sounds a bit entitled to ask for people to remove things like react from their projects.

No seriously, a library that generates random filled circles? Is this an exercise in getting a React package into the ecosystem? This is too elementary to be taken seriously, so why all the praise posts? I am genuinely confused. Why?

Reply on news.ycombinator.com