Background

SVG’s contain many different types of child elements, including circles, ellipses, and linear paths.

Objective

In this tutorial, we will use the circle we created in the previous post and make it into a face.

Step 0: Recap

In our last tutorial, we drew a circle with properties separated into CSS.

 
  
 
 
 
 svg {
   width: 150px;
   height: 150px;
   background-color: #EEEEEE;
 }
 circle {
	fill: #95D6F1;
	stroke: #000000;
	stroke-width: 2;
 }

Step 1: Add the eyes

We will use ellipses for the eyes. Like circles, ellipses have cx and cy attributes that determine where they show up. But while circles have one radius, determined by r, ellipses have two radii — a vertical one, ry, and a horizontal one, rx. I am making ry larger than rx because I want “tall” ellipses for these eyes.

Here is the HTML code. (The CSS is the same as before.)

Step 2: Add the mouth

A few variants