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!👋
Oldest comments (7)
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
Wow. You literally just drew in code. That's pretty cool!
Thank you! CSS is a wonder :D
Impressive!
Thank you!
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?