I like drawing with CSS, I find it relaxing (I know it's weird, but it is what it is). Today I recorded a live session with me coding this kawaii version of Yoda (or Grogu or Baby Yoda) with HTML and CSS, and shared it on YouTube:
The coding process took around 1:30, but I sped it 8x, so the video is ~12 minutes. This time it doesn't have any commentary. Normally I don't put any, so I guess this is normal. It does have elevator music from Bensound.
The initial expression (as seen in the clip poster) looked a little bit sad, so I changed the mouth into a smile by setting the Y scale to -1, which flipped the element vertically.
You can find the source code and live demo on CodePen:
As for the process, as it can be seen in the video, I started with the head, making it an oval using border-radius specifying different horizontal and vertical values.
The ears a variation of the tear/drop shape. I normally would have used a variable to place them symmetrically (as I did with the eyes later), but I didn't want the drawing to be fully symmetrical –Symmetrical drawings look fake to me.
And after I said that, I went ahead and create a fairly symmetrical drawing...
Except, I then started adding minor differences: one arm is rotated more than the other, one cloak fold is taller than the other, one hand is visible and the other one isn't... quite small things but they do it.
For the top of the cloak, the hood, I used a drop-shadow filter instead of borders. It makes it look a bit weird, but I'd like to think it looks like texture and not a mistake.
Overall, the drawing is fairly simple, not even 20 HTML elements. I always try to keep it minimal in the HTML, which later ends up bloating the CSS.