Drawing a chibi character with CSS (with video)

#css #cssart #webdev #showdev

I attempted to draw a chibi character using CSS and a single HTML element yesterday. It took more than usual, but it was a fun process. This was the result:

This time, I knew more or less what I wanted to draw (often, I start drawing without a clear idea of what will result, just for fun). But I didn't know how to organize it... so I started with what seemed more obvious: the face.

Adjusting the drawing size is essential, so I opted for a relative unit that I assigned to the font-size property. From then on, all the properties were in em units. I used an oval shape with a thin border to delimit the head and applied a few box-shadows and radial gradients to add some extra color and transitions (no flat drawing this time).

I'm fond of how the eyes look and are straightforward (considering other options I've done in the past): three radial gradients for the sparks, three radial gradients for the pupil and iris, three radial gradients for the eyelids, and one radial gradient for the white... radial gradients everywhere!

Then I realized that if I wanted to do the hair, I would need to move what I already had to one pseudo-element. Not a problem. I moved it to the ::after and then had the ::before (or the element in itself) to draw the hair and neck.

After finishing the face, I tried different variants. A good thing: the drawing uses custom properties, so it is effortless to change colors for skin, hair, eyes, etc. I will only share one here, but I shared more on Patreon.

The hair is one of the things I don't seem to do right. I went with a curly/wavy style because it is easier to code and doesn't look terrible, but it is also not as impressive as other styles (which are also 1,000 times easier in SVG... and don't get started with "this would be easier/better in SVG.")

Having completed the initial drawing, I removed some hard stops from the gradients to get smoother transitions and a more polished picture.

I recorded the coding process and shared it on my YouTube channel. It took around 2 hours to code the whole thing but don't worry, I sped the video up a lot, so the video is about 9 minutes: