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!๐
Top comments (7)
Impressive!
Thank you!
Wow. You literally just drew in code. That's pretty cool!
Thank you! CSS is a wonder :D
Looks great! I could see the speakers animated to show the beat.
Thank you for your suggestion! my goal is to do animation next to make it cooler
Hey, i just wondering if i draw using adobe illustrator and then export it as html and css.
will it work same as css illustration like yours?