# Drawing a Giraffe with CSS

Yesterday I did a quick cartoon of a giraffe using HTML and CSS:

<iframe height="600" src="https://codepen.io/alvaromontoro/embed/vYKqyNM?height=600&amp;default-tab=result&amp;embed-version=2" style="width:100%"></iframe>

The process went like this:

1.  Drew the snout by doing an ellipse and adding some rotation
2.  The head is a rotated oval
3.  A pseudo-element of the snout made a circle for the nose, and added some shadows to duplicate it
4.  For the mouth, we used another pseudo-element of the snout, we made it into an ellipse and use the bottom border for the line.
5.  The eyes are a rounded pseudo-element of the head and its shadow
6.  Then for the hair, another pseudo-element of the head shaped like an ellipse and with an inset box-shadow.
7.  Both ears are a single element and its `::after` by making them squares with opposite rounded corners.
8.  The horns were placed behind the head but in a position that makes them look like one is on top and the other one behind.
9.  A really tall rectangle made the neck
10.  A similar rectangle made the mane, with a small rotation and cropping small triangles to make it irregular.
11.  Finally, for the dots in the neck, we use a neck pseudo-element and a bunch of box-shadows :)

Here there is a timelapse video of the process:

<iframe width="710" height="399" src="https://www.youtube.com/embed/TFaNwRpMUhg"></iframe>