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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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'
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.
> 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.
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.
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.
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?
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.
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?
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?
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.
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 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
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.
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.
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.
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?
