I enjoy coding CSS drawings for fun. I find it relaxing and think it's an excellent way to practice CSS. So today, I did a session and completed this drawing on CodePen:
I recorded the process (as I normally do), but this time was a bit different: I recorded myself speaking and explaining the process on video for the first time. Typically, I only show time-lapses of the process as I’m too self-conscious of my voice and accent. Anyway, here’s the video:
It’s also my first long video, and I know it is pretty amateur (not a great mic, using iMovie for editing, etc.) So, any constructive feedback on the video will be appreciated and welcomed.
The process took longer than usual –I was describing each step out loud–, and followed these steps:
- Draw the basic head using an oval with
border-radius. - Add the ears (a flipped copy of each other with
scaleX(-1)). - Attach the parts of the face: mouth, eyes, nose...
- Add the neck (a simple square).
- Draw the hair using a bunch of
box-shadowin three steps. - Complete the body by setting a soft curve (
border-radius) on a rectangle.
With that, the drawing had all parts done, but it looked too basic and flat. So, to finish the CSS art, I added some details like shadows, freckles, some blushing on the cheeks... mostly using box-shadows and some filters.
If you don’t like long videos, or my voice is annoying or puts you to sleep (you wouldn’t be the first), here’s the time-lapse video I usually do:
If you enjoy this content, check the other videos on my channel too! :P
Top comments (2)
Ok so one evening I will watch the 2 hour version, but the time lapse version was very informative! Your voice seems lovely, stop being so self conscious!
The little details like the shadows and the freckles were great to see.
The only bit that was horrifying was when you were adding the eyebrows and had big red patches behind them, it looked like something out of a horror movie for a split second 🤣 (2:06 roughly!)
Great post, I really should do CSS art but...illustrator and SVG fanboy!
❤️🦄
Thanks!
I love drawing SVGs too (don't tell @afif 😋). But my go-to app is GIMP instead of Illustrator. It's not the same, but it is free 😳😅