[HN Gopher] Boring Avatars - React library to generate custom av...
___________________________________________________________________
Boring Avatars - React library to generate custom avatars
Author : arnklint
Score : 347 points
Date : 2021-05-28 05:15 UTC (17 hours ago)
(HTM) web link (boringavatars.com)
(TXT) w3m dump (boringavatars.com)
| exdeve wrote:
| This would be very helpful library but the react is huge
| limitation.
|
| Please remove react so more people could use it :)
| [deleted]
| kashug wrote:
| 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.
| city17 wrote:
| 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 wrote:
| 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.
| duxup wrote:
| I think the problem is that if you compare one to another
| (check out the sunset examples) ... they don't look unique.
| williamdclt wrote:
| I'd say unique enough to differentiate people within a
| conversation, which is good enough for a lot of use-cases
| brk wrote:
| 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.
| Thomaschaaf wrote:
| "Beam" should be the default style instead of "marble".
| leoedin wrote:
| 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 wrote:
| 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.
| awb wrote:
| 100% agree that faces are easier to remember. But some people
| might have privacy and/or bias concerns about posting their
| real photo.
| bee_rider wrote:
| The website has a selection of generated cartoonish faces.
| ivyirwin wrote:
| 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!
| lalokaya wrote:
| Very nice, great job!
|
| Here's another fun one: https://getavataaars.com/
| vernon99 wrote:
| This is a great one, thanks, we may use it for PeerBoard!
| speedgoose wrote:
| This one too https://www.zanorg.net/bouletmaton/
| fouc wrote:
| would be nice if gravatar supported this
| nxpnsv wrote:
| I like robohash
| MrUssek wrote:
| There should be an option for StyleGAN (i.e
| https://thispersondoesnotexist.com/)
| gnoll_of_gozag wrote:
| cursed idea: use _that one_ picrew you know the one
| mcintyre1994 wrote:
| 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
| dspig wrote:
| Beam needs an "avoid Hitler" algorithm (no straight sloping
| hair?)
| crispyporkbites wrote:
| 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.
| IgorPartola wrote:
| 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 wrote:
| 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
| postalrat wrote:
| Not to hijack robohash. But hashicon is better:
|
| https://github.com/emeraldpay/hashicon
|
| https://schumanncombo.com/hashicon
| randomhodler84 wrote:
| I don't know man, robots are much cooler than color boxes. I
| think the robots win here.
| FreakyT wrote:
| 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.
| quyleanh wrote:
| Excellent! I love the random color palette. I found some 'boring'
| avatar for my social sites now. Thank you.
| btbuildem wrote:
| 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.
| arnklint wrote:
| "Boring avatars is a tiny JavaScript React library that generates
| custom, SVG-based, round avatars from any username and color
| palette."
| Eric_WVGG wrote:
| sigh. Still hate that Twitter switched to round avatars. Too
| limiting.
| SyzygistSix wrote:
| 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.
| NohatCoder wrote:
| Why make a library dependent on a particular framework? Seems to
| just limit usefulness for no particular gain.
| kashug wrote:
| 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.
| NohatCoder wrote:
| 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.
| Nullabillity wrote:
| It can still be useful even if it doesn't cover every
| single corner case.
| jacobmischka wrote:
| 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...
| bhl wrote:
| 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.
| tobr wrote:
| 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.
| [deleted]
| NohatCoder wrote:
| But you could just write that generation in plain JavaScript,
| React is really just a syntax.
| lcrz wrote:
| 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.
| enlyth wrote:
| 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'
| IshKebab wrote:
| I don't think anyone's saying React is bad, they're
| saying it's weird that this library depends on it.
| Tade0 wrote:
| 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_libr
| ary
|
| 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.
| inbx0 wrote:
| And what percetange of those "static pages with JS
| sprinkled on top" have a need for automatically generated
| custom avatars?
| Tade0 wrote:
| 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.
| Kaze404 wrote:
| > 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.
| [deleted]
| jamestimmins wrote:
| These look amazing! Great balance of whimsical and sophisticated
| bradleykingz wrote:
| Excellent job.
|
| I especially like Beam and Bauhaus. Beam should definitely be the
| default.
| nc wrote:
| 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? :)
| InfiniteCode wrote:
| I've done this one some time ago - https://www.blankjs.com/ you
| can create your own styles there.
| bsenftner wrote:
| 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?
| new_here wrote:
| 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.
| bhl wrote:
| 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.
| thekyle wrote:
| I really like the "beam" ones.
| royletron wrote:
| 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.
| golergka wrote:
| Great idea! But with one color palette for all, it's pretty hard
| to tell them apart.
| eashish93 wrote:
| Not a boring one. It should be proavatars.
| pandemic_region wrote:
| 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 wrote:
| It seems you can edit any name of the avatars, creating a
| custom one.
| pandemic_region wrote:
| Doh you're right thanks!
| [deleted]
| xwdv wrote:
| 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.
| InfiniteCode wrote:
| On a same note, similar library I've built (also react, client
| side only): https://www.blankjs.com/
| devfromanatolia wrote:
| great job, loved the doc UI, also props for using notable women!
| sgallant wrote:
| Love the list of sample names!!
|
| https://notablewomen.withgoogle.com/all
| frankfrankfrank wrote:
| 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?
| TotempaaltJ wrote:
| This is just a list of notable women. It's not really
| "excluding men" as much as it is just a different category.
| ARandomerDude wrote:
| Exactly. Separate but equal.
| SyzygistSix wrote:
| 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.
| onion2k wrote:
| "When you are accustomed to privilege, equality can feel like
| oppression." Stephanie Herrera
| fsckboy wrote:
| 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?
| postalrat wrote:
| But has the concept been producing positive results?
| jfengel wrote:
| 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.
| impostervt wrote:
| I feel like this is how we'll all look in the distant future when
| we've uploaded ourselves into the singularity.
| nickjj wrote:
| 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.
| awb wrote:
| 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.
| nickjj wrote:
| > 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.
| falcolas wrote:
| Plus 16.7 million RGB colors, making for quite a few
| combinations (somewhere around 230 billion).
| dequor wrote:
| True,but it's a bit hard to distinguish between #ffffff and
| #fffffe
| falcolas wrote:
| 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.
| Mordisquitos wrote:
| > 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 Almodovar Caballero_ becomes " _PC_ ", rather than the
| acceptable versions " _PA_ " or " _PAC_ ".
| pindab0ter wrote:
| 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/
| nickjj wrote:
| 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.
| andrewzah wrote:
| 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).
| brk wrote:
| 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.
| [deleted]
| shagie wrote:
| 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.
| hanniabu wrote:
| 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.
| codeulike wrote:
| 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 wrote:
| 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...
___________________________________________________________________
(page generated 2021-05-28 23:02 UTC)