Mike Wazowski Faces In CSS

View Project Online

Decided to have a little fun with Pure CSS drawings and to try some pixel perfect code with some weird shapes.

I had seen this image around and to start with something basic (and also something that would not eat up ALL my time), decided to go with the lovable character Mike Wazowski.

Most of the faces had the same overall shape and some same elements so started off with the overall head, ears, and eyes (including iris and eye reflection).
From there added mouths, tongue, etc.

The toughest one was the mustache and the second to last face. Took some creative thinking.
Go ahead an take a look at the code!

Added a hover state for the pen to see the original face.

  • Experimentation with shapes
  • All shapes and figures done with CSS (SASS/SCSS)
  • As close as to pixel perfect as possible

I learnt a lot by experimenting with CSS shadows, radii, and transform.

Link to Pen with experiment and code: https://codepen.io/mae829/pen/YEwrqB

See the Pen Faces of Mike Wazowski – Pure CSS by Mike Estrada (@mae829) on CodePen.