You have probably seen a lot of gradient generators on the net, and you are probably thinking ... 'Ooh Great!, Another Gradient Generator'. But I implore you, Wait and see what I have for you.
So I will take you back to single digit dates of this Month (August), I was on twitter as I always do, I came across this profile by Annie Liew so of course i went on to see her profile, its an amazing profile taking into consideration what she has done already. I opened one of her projects found on github . It is an awesome Apparatus to say the least, you should give it a try.
After seeing what this apparatus could do, A thought bounced around in my head, what kind of a fun project can I make for myself. a couple ideas came into mind and of course we all know what won.
So first I had to highlight what kind of items would be included in the project. as you can se below, "...Roughly", Don't mock my process please 😂😅
Main Idea
The main idea was to make card generator that would be able to have both image backgrounds and gradient backgrounds. And on top of these images overlay text with amazing fonts or not, depending on the user preferences that is.
Sub Ideas
So following on the main idea.
Dark and Light Mode (I know right)
Make sure that the user can control the text font size
Text alignment was crucial in order for this to work as I had envisioned.
So in case user chose to use image as a background, then allow the user to paste a link to this image online. This had to improved for some obvious reasons, therefore i had to add an upload option the for the said background.
Other things came along as I was coding
Embarking into this project with the hype I had, Things started off on the wrong foot, and almost ended up on the "wronger" one but well I started on without a proper design, I just knew how things should be at least on the first draft i had in my head( Yes in my head.. We still exist). All I knew was this thing would only have one page built with VueJs. felt like so much to go on with at a time.
Anyways, moving on, Challenges that I foresaw at the time came true as seen in the snap above. I decided to do both of the "options" just because I thought it would be a great little challenge to overcome. that is making it possible for users to choose from either image backgrounds or gradient mix.
Okay before we go further, did I say that this project was completed in one day, or hours really cos i felt like I could, am not bragging, but that's the truth. I did post the first draft of the UI on my WhatsApp status, and some of my friends suggested ways to improve the UI. I also had to fix how the forms looked like and the UI for the buttons, cos the initial draft was wack 🤣🤣
So of course I hae had to improve the UI since then and also I felt like i could do more for this generator so adding some features as the days went has / was in play, One of the features was the conic gradient generation. Linear gradients and radial gradients were rather easy to create, but the conic gradient generation became a headache. This is cos conic gradients with Canvas are not widely supported for a lot of browsers except firefox recent versions. see here
I almost gave up. But I read on resources online on how to overcome this challenge and i built up on the idea that I could do this. I have this thing that i always tell myself.
"The future 'me' can do this, I might as well be the future 'me'. and I also believe that most of the things are possible given time and a lit bit of patience.
Eventually, I solved the 'Conic issue' that had somewhat shown to be a little bit of a B. What i did was to convert the normal conic gradient by CSS into a base64 image and then use this image for the canvas. sure there some drawbacks but it got the job as i expected it would.
I called the project Helixios cos am a fan of a tv show called Zoo (Ended a couple of years back), About Animal mutations and all. Seemed rather fair at the time 😉😅.
Here are some of the cards generated.
The generator is found at https://gradient-to-image.nodchriss.com/ . This has relatively been an exhilarating experience and will keep on building more if I get the time. And yes, if you got some feedback on how to improve this you are most welcome.