Creating illustration using CSS

#css #react #beginners

Hi all, I was working on this illustration for a few days and now it's completed and I am very excited to show you all.

How it started

I am an artist besides a software engineer. I am always illustrating and painting in my after office hours. So it gave me thought why not try to make it in CSS.
I already saw many amazing illustrations by talented people on Twitter and it made me more motivated.

Illustration choosing

A few months ago, I was trying to learn Adobe Illustrator and for the first practice project, I created a radio or boombox. So this time I also thought why not Boombox. But I somehow lost my illustration so I couldn't able to use it as a reference. 😔
I searched on Pinterest and found some really cool illustrations and took my basic reference from it. Here is the reference pic I choose.

Real work started

I used codesandbox react editor to create boombox. Actually, I wouldn't say to use react specifically, you can create it in simple HTML and CSS. It's all about your personal preference and mine was react. 😊
I wouldn't share the step by step coding procedure, as I don't think of myself as a pro CSS illustration creator. 😀
But I'll share my codesandbox link below for you all to check and give me suggestions. I know I need a lot of improvements and with your all help I can learn more. 😇

Final Reveal

After a few days, I able to finish it. But I only worked on it for a couple of hours in a day. I think it would take a maximum of 4 to 5 hours if I would try to complete it in a day.
I also skipped some things from the illustration, I didn't want to make it complex for the first time. I am planning to add these for the second part. 😊

Stay tuned and do share your thoughts about it.
Thanks!👋