Drawing a Giraffe with CSS

#css #html #codepen #illustration

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

The process went like this:

Drew the snout by doing an ellipse and adding some rotation
The head is a rotated oval
A pseudo-element of the snout made a circle for the nose, and added some shadows to duplicate it
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.
The eyes are a rounded pseudo-element of the head and its shadow
Then for the hair, another pseudo-element of the head shaped like an ellipse and with an inset box-shadow.
Both ears are a single element and its ::after by making them squares with opposite rounded corners.
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.
A really tall rectangle made the neck
A similar rectangle made the mane, with a small rotation and cropping small triangles to make it irregular.
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:

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.