CodeNewbie Community 🌱

Cover image for Drawing a chibi character with CSS (with video)
Álvaro Montoro
Álvaro Montoro

Posted on • Originally published at

Drawing a chibi character with CSS (with video)

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.

Cartoon of a young Black woman wearing a head band (chibi/anime style)

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:

Latest comments (1)

d4v3 profile image
sr D4V3

genial!! i need help wth homework!
Perform fuzzing of different GPL or AGPL licensed codes written in different languages.

  1. oscommerce GPL php
    1. KonaKart LGPL java
    2. zen cart GPL php
    3. spree BSD ruby
    4. Apache OFBiz Apache java
    5. ce phoenix GPL php

I have to deliver a:

  • .zip or .tar.gz file containing the following files: -Written report in pdf format -Link to the analyzed source code -Scripts used for fuzzing (.sh or .bat)

The written report should include:

-Description of at least 3 vulnerabilities present in the source code.
-Name of software, version and operating system used for fuzzing.
-Results obtained from fuzzing.