robertbroersma/bigheads

Easily create characters for your projects

Hi there 👋

I'm Robert

• 🔭 I’m currently working at Wolk
• 🌱 I’m currently learning how to play the piano
• 📫 How to reach me: 📧

bigheads's Issues

[Request] Online playground

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! ❤️

[Request] Add surgical mask

Due to Covid-19, I guess it's good to have some masks 😷

It can be added to accessory enum 🤔

React Native support

Thanks for lib)
What about RN support?

Huge Performance Issues

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

1. What could possibly be the cause of those incredibly slow renders?
2. How can I debug/perf-measure this?
3. Could someone here maybe take a look at this and help me figure this out so I can use this in production?

All kinds of help appreciated 👍

[Request] More hats

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.

Simple javascript example showing how to export svg and render on screen?

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.

Generator not downloading edited avatar

After i edit the bighead to my taste, and i click on download SVG, it doesn't download what I edited. Instead it download the avatar on the hero of the landing page

I think there's something wrong with the svg button

[Suggestion] Piercings, tattoos, crazy hair styles, and more!

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!

Does not always render hats

Reproduce the issue:
https://bigheads.io/editor?accessory=roundGlasses&body=chest&circleColor=blue&clothing=shirt&clothingColor=blue&eyebrows=angry&eyes=leftTwitch&facialHair=mediumBeard&graphic=none&hair=balding&hairColor=white&hat=beanie&hatColor=green&lashes=false&lipColor=purple&mask=true&mouth=serious&skinTone=yellow

Selecting a turban or beanie does not generate it in the image.

Adding new items to bigheads

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.

Use on Express Js server

Can I use Bigheads on Express js server?

[BUG] The beanie is off on apple devices...

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.

1. The beanie is off in the downloaded svg

2. The beanie is also slightly off on mobile (iphone, safari, chrome, firefox)

(I'm using in on a react project) But it's okay on the web browser.

Just thought you should know! Thanks!

[Request] add rest of the body to simulate a crowd

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.

[Suggestion] Random avatar on Tap

Hey, can we add a feature on this, that on tapping it generates a totally random avatar? It would be way cool.

Playground: Generated image dissapears on with "Mask" set to "False"

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!

Having to scroll

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 )

[Suggestion]

Make this a Figma/Adobe XD plugin, please!

[Enhancement] Insert mustache

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.

[Enhancement] Pets

Would love to see a pet version of this for Dogs and Cats etc.. Nice job on this.

Doesn't work server-side

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!

Strange layering issues

Not sure what is happening but the layers seem to be broken. For sure this is something I am doing but I am wondering if anyone has seen this and knows what I am doing wrong! Thanks.

[Suggestion] Avatar generator sticky

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.

Random bigheads

hello, good job!
It would be very good to be able to generate random bigheads :D