Shonk Generator banner

Shonk Generator

15 devlogs
41h 5m 50s

Generate a Blåhaj in your favorite colors!
You can choose from preset color combinations, pick a different Shonk variant or even use your own!! Once you’re done, you can simply download the Shonk as an image or export it into a bash script :3

Loading README...

Felix

Shipped this project!

Hours: 41.1
Cookies: 🍪 1117
Multiplier: 27.18 cookies/hr

The Shonks are coming for you!!!!

Was very fun to make. Learned some new stuff and am pretty happy with the end result!
Mostly struggled with the logic behind colorizing the Shonk as my math skills aren’t the best…

Anyways, I hope you can make good use of it!

Felix

Added a README, made a banner in Figma, fixed bugs and made some QOL changes. Also worked on an issue template for GitHub so you can easily suggest new flags. Spent two hours trying to rework that colorization algorithm for better results but failed horrendously and discarded all the changes.
Oh, there’s also a favicon now! Got it from the pixel safari

Attachment
Attachment
0
Felix

YURI!!!!
You can insert custom ASCII-Art now (or whatever you want to colorize). Adding the custom variant wasn’t that hard to implement and didn’t take long, but fixing all the issues that were caused by selecting a preset color combination with an amount of colors that was greater than the amount of lines your custom ASCII-Art had was… painful (T_T). I figured it out eventually but it always feels so weird thinking about it for an hour and then only committing like 10 lines of code lmao.
Also did some other smol bug fixes and changes like usual.

Would say that I’m mostly done now, will just have to add a favicon, maybe a few more presets, a banner, a proper README aaaaaaand then I’m ready to ship I think!

0
Felix

You can export your Shonk into a bash script now!!
Thanks for the suggestion MeBadDev!
Took quite some time cuz I needed to figure out how to properly display rgb colors in bash. Also did a smol bug fix regarding the z-index of an element :3

0
Felix

Happy New Year!!!

Added a maximum of colors you can select based on the amount of lines the Shonk has.
And I fixed the font rendering finally!! Turns out it only worked on my Desktop and not on my mobile devices because I actually had the font installed on my pc and it didn’t get overridden because I made a typo in the FontFace (T_T)
Also fixed some other bugs, you can check out the commit history on GitHub if you’re interested!

Oh, and I’m using VSCodium instead of VSC now :3

1

Comments

æra
æra about 1 month ago

Yayay

Felix

I added credits for the ASCII-Art and worked with React Router for the first time! Was actually way easier than I imagined it to be. Also changed the default font because the old one was hardly readable. Not too sure if I’ll stick with that one though. There’s also a link to the repository in the footer now!

Oh and the year is almost over, or maybe it is already for you. Hope you’re havin’ a great start into 2026!!

0
Felix

Okay the colors are distributed more evenly now! Tried out a lot of different ways to do that and ended up in LibreOffice Calc to find out what the heck I needed to do. Finally figured it out after like 2.5 hours of pain… On the Screenshot you can see the old version on the right side and the new one on the left side (the one with the border around it!)

Also some smol changes/bug fixes, you can check out the commits on GitHub if ya wanna know more :3

Aaaaand, I just noticed that I didn’t even listen to music the whole time?! 😭

Attachment
0
Felix

Added different shonk variants and some more presets!!
Why this took so long? I dunno (T_T)

0
Felix

Trying to make the site mobile responsive is pain… It’s better than before but the text in the HTML canvas is somehow thinner on mobile than on Desktop?? I’m guessing that it has something to do with the pixel density but I don’t know how to fix it (if you have any idea then please tell me 😭😭)
In addition to the site being a bit more responsive, I also added preset color combinations, I’ll probably add a few more in the future! Apart from that I tweaked some small stuff.
Overall I feel like I’m pretty darn slow. The seemingly simple project is about to hit 24 hours of logged time…
I’m almost there though, I’ll just make some minor QOL changes, add different Shonk variants (and maybe an option to insert your own) and… cry while trying to make the site mobile compatible and make the color distribution more even when… it can’t properly distribute them evenly (T_T)

0
Felix

Added download options. You can now change the scale and the background color of the PNG!!
I struggled a lot trying to export the canvas scaled and am still confused about that but it works now!
I also noticed that the JetBrains Mono font had ligatures by default so I disabled that, should look better now :3

0
Felix

You can download your Shonk now!!
I achieved this by transforming the preview from simple elements into a HTML canvas which I can easily transform into an image you can download. This took a while but it finally works! I’ll also try to add the option to either download it with a transparent background or the with the background my site uses (or a custom one, idk yet).

2

Comments

MeBadDev
MeBadDev about 1 month ago

This is so cool! Can I export it to a bash script? Would be fun to put into my .bashrc lol

Felix
Felix about 1 month ago

Ooo, that’s a great idea. Gonna try to implement that, ty!!

Felix

You can now remove colors either with middle or right click!! Also changed some stuff regarding how I store the selected colors but that took a lil while cuz I don’t have that many braincells :P

0
Felix

Also replaced HTML’s checkbox element with my own custom component now so I can style it properly. Also added pointer cursors to make the UX a bit more intuitive. Next I’m probably gonna add the ability to remove colors (and reorder them maybe? :3

0
Felix

Merry Christmas!!
Didn’t do all too much today. I made my own component as a replacement for HTML’s color input element tho, so I can implement the ability to delete colors more easily in the future.
I’m gonna do that for the “Loop” checkbox too so I can properly style that one.

And I didn’t even know that you can upload multiple attachments, I added one where you can see the colored Shonk with the “Loop” setting toggled on ^w^

Attachment
Attachment
1

Comments

wojtek
wojtek about 1 month ago

This is so peak. Can u please let me know when u ship :3

Felix

It’s getting somewhere!
You can add as many colors as you want now!! (I should add a limit tho, that shouldn’t be too hard).
I still need to add the option to remove colors but I dunno how well I can do that with the default HTML input element I am using… Same goes for the Loop setting, I dunno how much I can actually customize it using CSS.
Yeaaaa and I still have to add the Download, the presets, the Shonk variant switcher and a lovely footer :3

Attachment
0
Felix

This took wayyyy to loong but the basic functionality is done now. Just gotta let the user add any amount of colors themselves, add more Shonk variants, make preset color combinations (forgot about that in the Figma design) and make the customized Shonk downloadable!
Oh, and I actually have to implement the design I made in Figma, but that shouldn’t be too hard!

Attachment
0