9 ms·
Boring Avatars – React library to generate custom avatars
- arnklint 5y ago"Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette."
- Eric_WVGG 5y agosigh. Still hate that Twitter switched to round avatars. Too limiting.
- SyzygistSix 5y agoLike 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.
- pandemic_region 5y agoThe 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 5y agoIt seems you can edit any name of the avatars, creating a custom one.
- pandemic_region 5y agoDoh you're right thanks!
- quyleanh 5y agoExcellent! I love the random color palette. I found some 'boring' avatar for my social sites now. Thank you.
- jamestimmins 5y agoThese look amazing! Great balance of whimsical and sophisticated
- thekyle 5y agoI really like the "beam" ones.
- Thomaschaaf 5y ago"Beam" should be the default style instead of "marble".
- leoedin 5y agoI 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 5y agoFaces 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.
- bradleykingz 5y agoExcellent job. I especially like Beam and Bauhaus. Beam should definitely be the default.
- lalokaya 5y agoVery nice, great job! Here's another fun one: https://getavataaars.com/ https://getavataaars.com/
- speedgoose 5y agoThis one too https://www.zanorg.net/bouletmaton/ https://www.zanorg.net/bouletmaton/
- nxpnsv 5y agoI like robohash
- vernon99 5y agoThis is a great one, thanks, we may use it for PeerBoard!
- fouc 5y agowould be nice if gravatar supported this
- MrUssek 5y agoThere should be an option for StyleGAN (i.e https://thispersondoesnotexist.com/ https://thispersondoesnotexist.com/)
- crispyporkbites 5y agoNice- but personally I prefer Identicons e.g. https://idbloc.co/blog/product/update/2019/05/09/toggles-identicons-and-beauty.html https://idbloc.co/blog/product/update/2019/05/09/toggles-ide... These are basically a hash in visual format.
- NohatCoder 5y agoWhy make a library dependent on a particular framework? Seems to just limit usefulness for no particular gain.
- jacobmischka 5y agoIt 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/master/src/lib/components/avatar-marble.js#L25 https://github.com/boringdesigners/boring-avatars/blob/maste...
- NohatCoder 5y agoBut you could just write that generation in plain JavaScript, React is really just a syntax.
- lcrz 5y agoBecause 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 5y agoI 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'
- Tade0 5y agoThere'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 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.
- deleted 5y ago[deleted]
- devfromanatolia 5y agogreat job, loved the doc UI, also props for using notable women!
- exdeve 5y agoThis would be very helpful library but the react is huge limitation. Please remove react so more people could use it :)
- kashug 5y agoit'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.
- deleted 5y ago[deleted]
- dspig 5y agoBeam needs an "avoid Hitler" algorithm (no straight sloping hair?)
- nc 5y agoIncredible 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 5y agoI've done this one some time ago - https://www.blankjs.com/ https://www.blankjs.com/ you can create your own styles there.
- new_here 5y agoAwesome 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 5y agoThat 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 https://github.com/lfades/static-tweet and https://github.com/vercel/og-image https://github.com/vercel/og-image.
- eashish93 5y agoNot a boring one. It should be proavatars.
- InfiniteCode 5y agoOn a same note, similar library I've built (also react, client side only): https://www.blankjs.com/ https://www.blankjs.com/
- codeulike 5y agoMy 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-full-of-unicorns https://meta.stackexchange.com/questions/37328/my-god-its-fu...
- shagie 5y agohttps://unicornify.pictures https://unicornify.pictures (see also https://news.ycombinator.com/item?id=24281401 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 https://bitbucket.org/balpha/go-unicornify. The code appears to have been migrated to GitHub at https://github.com/codingisacopingstrategy/unicornify https://github.com/codingisacopingstrategy/unicornify and the about page on https://web.archive.org/web/20100428132341/http://unicornify.appspot.com/making-of https://web.archive.org/web/20100428132341/http://unicornify... The code is also at https://bitbucket-archive.softwareheritage.org/projects/ba/balpha/go-unicornify.html https://bitbucket-archive.softwareheritage.org/projects/ba/b...
- mcintyre1994 5y agoThese 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 https://francoisbest.com/posts/2021/hashvatars
- bsenftner 5y agoNo 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?
- IgorPartola 5y agoNot to hijack this (I have zero affiliation with this project), but RoboHash has been my absolute favorite version of this: https://robohash.org/ https://robohash.org/
- postalrat 5y agoNot to hijack robohash. But hashicon is better: https://github.com/emeraldpay/hashicon https://github.com/emeraldpay/hashicon https://schumanncombo.com/hashicon https://schumanncombo.com/hashicon
- randomhodler84 5y agoI don’t know man, robots are much cooler than color boxes. I think the robots win here.
- FreakyT 5y agoAgreed -- 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.
- fouc 5y agoI recognize robohash from gravatar mainly. https://en.gravatar.com/site/implement/images/ 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 5y agoThey 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 5y ago> 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".
- andrewzah 5y agoThis 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).
- deleted 5y ago[deleted]
- brk 5y agoTechnically 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.
- 5y ago
- city17 5y agoThe 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 5y agoPeople 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 5y agoI think the problem is that if you compare one to another (check out the sunset examples) ... they don't look unique.
- brk 5y agoIMO, 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.
- williamdclt 5y agoI'd say unique enough to differentiate people within a conversation, which is good enough for a lot of use-cases
- xwdv 5y agoAn 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.
- golergka 5y agoGreat idea! But with one color palette for all, it's pretty hard to tell them apart.
- sgallant 5y agoLove the list of sample names!! https://notablewomen.withgoogle.com/all https://notablewomen.withgoogle.com/all
- frankfrankfrank 5y agoSo 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 5y agoThis is just a list of notable women. It's not really "excluding men" as much as it is just a different category.
- ARandomerDude 5y agoExactly. Separate but equal.
- SyzygistSix 5y agoWhile 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 5y ago"When you are accustomed to privilege, equality can feel like oppression." Stephanie Herrera
- postalrat 5y agoBut has the concept been producing positive results?
- hanniabu 5y agoAnybody 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.
- royletron 5y agoImplemented 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.
- impostervt 5y agoI feel like this is how we'll all look in the distant future when we've uploaded ourselves into the singularity.
- ivyirwin 5y agoI 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!
- btbuildem 5y agoI 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.
- gnoll_of_gozag 5y agocursed idea: use that one picrew you know the one