DEV Community

Discussion on: How to create pure CSS illustrations and animate them - Part 1

Collapse
 
bitwombat profile image
Bit Wombat

I'm really interested in HOW you draw something like that.

At least with drawing software, there's a stylus or mouse that's sort of like a pencil.

But with numbers in CSS for position, size, etc., are you just trial-and-erroring things live until they look right? Nudging the positions, radii, aspect ratios around?

And how do you think up "oh, I need a red, clipped circle for the tongue, but elevated a bit from the mouth's bottom edge"?

CSS comes easily to me but for that stuff I'd appreciate some hints on how you think!

Many thanks.

Collapse
 
agathacco profile image
Agathe Cocco

I've been practicing CSS images for a while now so it comes more easily, but I didn't know where to start either when I first tried.
You can start by replicating an existing illustrations. Go on dribbble.com for example, and pick something simple to begin with. It'll let you focus on the actual process without having to worry about the creative aspect.
And yes, often play around a lot and try out different things before I'm happy with the result. Most of the time, I only have a rough idea of what I'm going to build, and my project takes shapes as I give it more thoughts. I also look at a lot of illustrations, drawings and photography, which keeps me inspired.
Hope this helps :)