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.
Please, leave a comment with questions about the process or about specific parts of the video that may need explanation.
Top comments (11)
Thanks for sharing!
This is so fun! Love how the tiny asymmetries give Baby Yoda so much character - did you find any part especially tricky to get right with pure CSS?
Thanks. It's trickier than with SVG, but with time and practice, it becomes a bit easier.
Very nice, thank you .
How have you mastered gradients, uniquely by testing ?
Thanks. It's a lot of practice.
Very nice, thank you .
Brilliant Work
Thanks,
Wow, this is really impressive! CSS art like this always blows my mind. 🤯 I’ve worked with CSS before, but I’ve never dared to try something as intricate as this. The way you use transformations, shadows, and gradients to create such detailed shapes is truly inspiring and motivates me to experiment more with CSS.
I think this is also a great way to learn and explore what CSS can do beyond the usual layouts and styles. Seeing how properties like border-radius, box-shadow, and transforms can be used to achieve these results gives me a ton of ideas for my own creative projects.
Thanks for sharing! I’m definitely going to give this a try and see how I can modify it to make something personalized.
This is amazing😲
This is extremely impressive, the little imperfections are what make it so good tbh
You certainly dedicated a lot of time and effort to create this adorable project.