robertbroersma / bigheads Goto Github PK
View Code? Open in Web Editor NEWEasily create characters for your projects
Home Page: https://beanheads.robertbroersma.com
License: MIT License
Easily create characters for your projects
Home Page: https://beanheads.robertbroersma.com
License: MIT License
Hey, can we add a feature on this, that on tapping it generates a totally random avatar? It would be way cool.
Please add more hats. I currently have to use Apple Memoji (which has many more options for headgear) through a long-winded manual process and I want, more than anything, to switch to this.
I love this library. I would love it if you could add a couple of parameters for height and weight. Obviously these are cartoons so the proportions don't have to be exact.
For context, I'd love to use this to generate two sets of crowds, based on two different normal distributions. One could be basketball players (tall, skinny), one could be football players (not skinny). Students would be able to visually see how the two crowds differ.
Hey!
First, I would like to congratulate you for this amazing project, you had an amazing idea and the avatars are simply great!
I would like to suggest, if it isn't already in your roadmap, to include more crazy avatar features, such as piercings, tattoos, crazy hair styles like mohawk, and maybe even later on some even more creative stuff like cyborg features (Cyberpunk releasing soon, wink wink).
I believe it would really add up to the diversity and playfulness!
Due to Covid-19, I guess it's good to have some masks π·
It can be added to accessory
enum π€
hello, good job!
It would be very good to be able to generate random bigheads :D
Invariant Violation: View config getter callback for component `path` must be a function (received `undefined`). Make sure to start component names with a capital letter.
This error is located at:
in path (created by Mask)
in mask (created by Mask)
in Mask
in svg
in Unknown
When trying to use this:
<BigHead
accessory="shades"
body="chest"
circleColor="blue"
clothing="naked"
clothingColor="white"
eyebrows="concerned"
eyes="happy"
faceMask={false}
faceMaskColor="white"
facialHair="none"
graphic="react"
hair="afro"
hairColor="blonde"
hat="turban"
hatColor="blue"
lashes
lipColor="turqoise"
mask
mouth="openSmile"
skinTone="yellow"
/>
Hey
maybe you could make the avatar sticky in the generator.
As when I change an attribute it scrolls to the top. And I cannot always see the difference. Would be great if you could see the avatar all the time while editing it.
In the editor, while editing the characteristics towards the end we need to scroll down everytime we make a change to edit again.
I was using from a browser and found this a bit repetetive. If we can have the editor in such a way that the character is always visible, that'd be nice.
Other than that amazing work! (I'd have contributed if you are open to that, but I haven't tried TypeScript :P )
Hello!
I'd like to leave here a sincere thanks for making this library, you're doing an amazing job!
I'm here to make a request so we can have a mustache on avatars as it may be something very common for male programmers!
And if I could help this happen in any way, I'd be glad to do so.
I think this design concept is very innovative. It would be even better if it could support Vue3 or Nuxt3.
Can I use Bigheads on Express js server?
Would love to see a pet version of this for Dogs and Cats etc.. Nice job on this.
Selecting a turban or beanie does not generate it in the image.
Hey
I love this bigheads π
Any chance to have an online playground to generate them in real-time? (Maybe with png
export too π )
Thanks for all your efforts! β€οΈ
Hi, this is a really awesome project! Thanks for putting it out here!
I'm using your this library in https://epic-notes.vercel.app/react/advanced-hooks/4
And I noticed two bugs.
(I'm using in on a react project) But it's okay on the web browser.
Just thought you should know! Thanks!
Hi! While I really like the drawing style of the characters and want to use them to identificate users instead of profile pictures, I cannot do so. Unfortunately the render-time of a single bighead is so high, that I simply cannot use it in production (yet). I also created a screen where the user can customize his BigHead, which renders even slower.
I am using the react-native package of this library, but since the SVGs are the same this issue should also apply to this repository.
I'm talking about noticeable delay in initial rendering (mounting) (see this demo), and generally really slow renders on re-rendering when a prop changes (see this demo). Those are definitely UI thread lags, so the vectors must be composed using expensive techniques, such as clipping, which could be optimized.
I am trying to debug why this renders so slow, as normally vector rendering should be really fast. Now to my actual question(s):
All kinds of help appreciated π
Thanks for lib)
What about RN support?
It seems the package doesn't work server-side.
I've tried using it on a Next.js 13 app, and keep getting the Error: Hydration failed because the initial UI does not match what was rendered on the server.
error.
The workaround for it is to prevent the component from rendering until useEffect
runs, which I assume means it only works client-side.
Also, trying to use it on a serverless function to generate an OG image with @vercel/og
also doesn't work, though no error message is shown.
Is this a known issue, or is there a different way to mitigate it?
Great project, btw. Thanks for putting this together!
Hey,
Just stumbled across this and must say, good job! π
However, I just noticed that the image disappears on playground upon setting "Mask" to "False" in Firefox Developer Edition 82.0b9. It works fine for me on Chromium 86.0.4240.75.
I checked the inspector but couldn't figure out why the image would disappear as it only happens with "Mask" but not with other settings.
On another note the ambiguity of using "mask" for the backdrop might confuse some, now that you have added "faceMask".
Cheers!
Hi, I'm not a web developer and don't know anything about react (and not much about typescript). Could you please provide a simple example showing how to generate an svg and perhaps even render it? Something a non-react developer would understand?
For context, I'd love to use this to get my students to generate their own avatars, feed me the attributes, I'll render tiny little icons of their avatar and display them on an educational board game.
Also, this is awesome work. I would love to read about how you did this at a technical level. This is basically a domain specific language for cartoon characters.
Hi Robert,
I was wondering how do you create new components of SVG while laying on top of existing react components. As I tried googling around for it but it seems your route was easy instead of prebuilt tons of SVG. May I know is there a guide or something on adding it while laying on top of these SVG files. Cause I'm looking of implementing something similar as well.
Make this a Figma/Adobe XD plugin, please!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.