DEV Community

Cover image for Creating illustration using CSS
Aneeqa Khan
Aneeqa Khan

Posted on

Creating illustration using CSS

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.

reference

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!👋

Discussion (7)

Collapse
sagdish profile image
Sagdi Formanov

Impressive!

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
ktenbrook1 profile image
Katelynn M Tenbrook

Wow. You literally just drew in code. That's pretty cool!

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you! CSS is a wonder :D

Collapse
jeffrainey profile image
jeffrainey

Looks great! I could see the speakers animated to show the beat.

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you for your suggestion! my goal is to do animation next to make it cooler

Collapse
vallerydelexy profile image
vallerydelexy

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?