Background

In our last tutorial, we looked at how to draw a simple emoji-like SVG face by adding a circle, two ellipses, and paths and looking at their various attributes. In this tutorial, we’ll investigate how other emoji-like expressions look as SVG code.

To explore these questions, we will take a look at facial expressions drawn in the same general style and look at their various elements. These expressions are a little more detailed, with eyebrows, noses, and in some cases, tongues.

I drew all these expressions in Inkscape rather than code because I knew I would want to add some artistic expression to things like eyebrowes, noses, and mouths. I encourage you to explore Inkscape, as it is a terrific open source tool for creating vector graphics.

The purpose of going into these graphics and taking a look at how they look in code is to highlight what the art looks like “under the hood” as SVG code, as an understanding of an SVG’s components will enable you to become more effective at editing and animating SVG’s. Armed with a better understanding of what it takes to animate these, we will look at how to animate these in our next tutorial.

If you’d like to see how I drew these in Inkscape, let me know in the comments below or over Twitter.

Here we go

We have nine facial expressions we will look at. Here they all are below.

  • hypnotic trance
  • stern
  • jocular
  • surprised
  • wary
  • sleeping
  • confused
  • yelling
  • grossed out
  • (hearts for eyes)

Here we go!

hypnotic trance (animation: from neutral face)

In this expression, I am using open circles with no fill. I am using no pupils and a small circular mouth to give that “tranced out” look.

stern (animation: turning whole head from side to side)

Here we have turned the smile upside down, flattened it a bit, and we’ve bumped up the stroke-width by 3. We also have those eyebrows that are clearly not havin’ it.

jocular (animation: talking)

Here I am using smaller circles for the eyes as opposed to large ellipses. The maroon of the mouth is a completely separate object, as is the tongue.

surprised (animation: from neutral face)

Here is the static image. Here I am using another technique from “Peanuts” and other comics by having curved lines on the outer sides of the eyes drawn with paths. I am not making them quite symmetrical.

wary (animation: looking back and forth)

Here we have curved paths used over the lines that are similar to those used in teh “Peanuts” cartoon.

I am using a circle for the mouth. Note how its r attribute could be animated to adjust the mouth’s size.

sleeping (animation: waking up)

In this first sleeping image, I am using a path for each eye. However, if you use a flat ellipse, as in this second face, you can animate the person waking up!

confused (animate from neutral face)

Using a path with a separate fill-only object for the confused mouth. I am also using some squiggly-looking paths for the eyebrows, and the eyes are two circles with strokes and fills.

yelling (animation: mouth getting larger and smaller)

Classic “Peanuts” yelling state with a large blob-like object for the mouth. The nose is a path with a fill that is the same color as the face. You can get a nice cyclic animation out of this one.

grossed out (animation: exclaim)

Back to the circular eyes with no fill, this time for a sickly look. The tongue appears over the mouth and has a pink fill. Using two paths on the outer side of each eye to convey the grossed out exclamation.

Lovey face (animation: pop)

Using two hearts for the eyes with an open mouth. Both shapes have fills. You can find more symmetrical hearts online, but I just hand-drew these to give it a more human and spontaneous quality.

Takeaways

  • SVGs consist of one or more elements, such as circles
  • The viewBox is the SVG “window” and its scale is relative to the art
  • Without width and height, the SVG will expand to fit the width of the browser or device
  • The properties of an SVG can be captured in CSS