SVG Tutorial: Animations

Welcome to the second tutorial in a series of tutorials all about SVG’s! In this second tutorial we will cover how to animate the simple SVG shapes. The types of animation include:

• Colour
• Move
• Rotate
• Bounce

- Prerequisites

If you are new to the world of SVG it’s best to go through my SVG basics tutorial before this one. Otherwise dive right in!

---

- 1. Colour Animation

Learn how to animate a colour transition from blue to green and back:

1. Create a circle within a SVG file called “colour-animation”.
2. Add @keyframes logic and a circle selector within the style tags:

@keyframes colour_change {
  from { fill: blue; }
  to { fill: green; }
}

circle {
  animation: colour_change 2s infinite alternate;
}

3. Try not to let the colours hypnotise you.

- Details

CSS Animations
In this example we are using:

• circle selector to select the circle element
• animation property to set the animation logic
• @keyframes to define our animation.

These are all standard CSS abilities.

- Full Code

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes colour_change {
      from { fill: blue; }
      to { fill: green; }
    }
    circle {
      animation: colour_change 2s infinite alternate;
    }
  </style>
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

---

- 2. Move Animation

Learn how to animate the transformation from left to right and back again:

1. Take a copy of “colour-animation” and rename it “move-animation”.
2. Change the @keyframes logic and animation name:

@keyframes move {
  from { transform: translate(50px); }
  to { transform: translate(300px); }
}

circle {
  animation: move 1s linear infinite alternate;
}

3. Imagine yourself playing pong

- Details

CSS Transforms
This example shows how you can use CSS transforms to manipulate SVG elements. It’s possible to use a wide range of CSS transforms:

• Translate
  Move an element based on x/y coordinates:
  transform: translate(50px, 50px)

• Rotate
  Rotates an element:
  transform: rotate(45deg)

• Skew
  2D Skew an element in either the x and/or y direction:
  transform: skew(15deg, 15deg)

• Scale
  Scale an element in the x and/or y direction:
  transform: scale(0.5, 1.5)

It is also possible to apply transforms in 3D space.

- Full Code

<svg width="450" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
	@keyframes move {
	  from { transform: translate(50px); }
	  to { transform: translate(300px); }
	}
  circle {
    animation: move 1s linear infinite alternate;
  }
  </style>
  <circle cx="50" cy="100" r="80" fill="blue" />
</svg>

---

- 3. Sun Animation

Learn how to animate the transformation from left to right along an arc:

1. Create a file called “sun-animation”.
2. Add three animation steps (0%, 50%, 100%).
3. At each step rotate and change the fill:

@keyframes move {
  0% { transform: rotate(0deg);  fill: red;}
 	50% { fill: yellow;}
	100% { transform: rotate(220deg); fill: red;}
}

.sun {
  transform-origin: 400px 400px;
  animation: move 4s ease-in-out infinite;
}

4. Marvel at how time flies.

- Details

@keyframes
Keyframes are used to define the animation steps. The steps can be defined as either “from”, “to” or more granularly with percentage values.

transform-origin
This allows us to set the point of rotation. In this example it is set to the bottom center of the image.

ease-in-out
Here we define the transition-timing-function which is the speed curve of the transition effect. In this example the animation starts slow, speeds up and then ends slow.

- Full Code

<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes move {
      0% { transform: rotate(0deg);  fill: red;}
      50% { fill: yellow;}
      100% { transform: rotate(220deg); fill: red;}
    }

    .sun {
      transform-origin: 400px 400px;
      animation: move 4s ease-in-out infinite;
    }
  </style>
  <rect x="0" y="0" width="800" height="400" fill="lightblue"/>
  <circle cx="100" cy="500" r="100" class="sun" />
</svg>

---

- 4. Bounce Animation Part 1

Learn how to animate the rise, fall and squash of a bouncing ball:

1. Create a file called “bounce-animation-1”.
2. Add three animation steps (40%, 50%, 60%).
3. Translate and squash the ball element:

@keyframes bounce {
  40%  { transform: translateY(200px) scale(1, 1); }
  50%  { transform: translateY(190px) scale(1.1, 0.9); }
  60%  { transform: translateY(200px) scale(1, 1); }
}

.ball {
  transform-origin: 50% 50%;
  animation: bounce 1s infinite;
}

4. Remember simpler times.

- Details

Bounce: @keyframes
Steps 0% and 100% are omitted in this example so the defaults values are automatically used.

Ball: transform-origin
The transform-origin is set to the center of the ball. This allows our squash (scale) transformation to work as required.

- Full Code

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes bounce {
      40%  { transform: translateY(200px) scale(1, 1); }
      50%  { transform: translateY(190px) scale(1.1, 0.9); }
      60%  { transform: translateY(200px) scale(1, 1); }
    }

    .ball {
      transform-origin: 50% 50%;
      animation: bounce 1s infinite;
    }
  </style>

  <rect x="0" y="0" width="400" height="400" fill="skyblue"/>
  <rect x="0" y="300" width="400" height="100" fill="#44cf6c"/>
  <circle class="ball" cx="200" cy="50" r="50" fill="#db5461"/>
</svg>

---

- 5. Bounce Animation Part 2

Learn how to add depth to the Bouncing Ball animation:

1. Take a copy of “bounce-animation-1” and rename it “bounce-animation-2”.
2. Add an ellipse for the shadow.
3. Add three shadow animation steps.

@keyframes bounce {
  40%  { transform: translateY(200px) scale(1, 1); }
  50%  { transform: translateY(190px) scale(1.1, 0.9); }
  60%  { transform: translateY(200px) scale(1, 1); }
}

.ball {
  transform-origin: 50% 50%;
  animation: bounce 1s infinite;
}

4. Try to believe your eyes.

- Details

Shadow: @keyframes
Shrink the shadow using scaling as the ball rises.

Shadow: transform-origin
Set the shadows transform-origin to the center of the ellipse so that it scales around its center

Ground:
Raise the ground slightly to give the impression of depth

- Full Code

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes bounce {
      40%  { transform: translateY(200px) scale(1, 1); }
      50%  { transform: translateY(190px) scale(1.1, 0.9); }
      60%  { transform: translateY(200px) scale(1, 1); }
    }
    @keyframes shadow {
      0%  { transform: scale(0.5) ; }
      50%  { transform: scale(1) ; }
      100%  { transform: scale(0.5) ; }
    }
    .ball {
      transform-origin: 50% 50%;
      animation: bounce 1s infinite;
    }
    .shadow{
      transform-origin: 50% 300px;
      animation: shadow 1s infinite;
    }
  </style>
    <rect x="0" y="0" width="400" height="400" fill="skyblue"/>
    <rect x="0" width="400" height="125" y="275" fill="#44cf6c"/>
    <ellipse class="shadow" cx="200" rx="50" cy="300" ry="15" />
    <circle class="ball" cx="200" cy="50" r="50" fill="#db5461" />
</svg>

---

- 6. Smiling Emoji Animation

Learn how to animate path elements and strokes:

1. Create a file called “emoji-animation”.
2. Add a rectangle for the background.
3. Add three circles; one for the face and two for eyes.
4. To style the half moon eyes apply a dash array to the circles:

.eyes {
  stroke-dasharray: 38;
  stroke-dashoffset: 38;
}

5. Add a path element for the mouth

<path id="mouth" d="M160,250 C175,250 225,250 240,250" stroke-linecap="round" stroke="black" stroke-width="7" fill="none" />

6. Smile!

- Details

stroke-dasharray
The stroke dash array converts a solid stroke line to a dash: “-----”. The value is the length of each dash line in pixels. In our example we can only see one dash line

stroke-dashoffset
The stroke dash offset determines the start point of the first dash line. By animating the offset we can make the half moon eyes appear to move!

**Note:** The circumference of the eye is ~76px which is why we use 38px for the stroke (half the circumference)

The path element can be used to define any shape. The “d” element defines the path to be drawn. There are six path commands the “d” element understands:

• M/m : MoveTo
• L/l : LineTo
• C/c : Cubic Bézier Curve
• Q/q : Quadratic Bézier Curve
• A/a : Elliptical Arc Curve
• Z/z : Close Path

Note: Uppercase letters use absolute coordinates whilst lowercase letters use relative coordinates

- Full Code

<svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes smile {
      0% {
        d: path("M160,250 C175,240 225,240 240,250");
      }
      20% {
        d: path("M160,250 C175,240 225,240 240,250");
      }
      80% {
        d: path("M160,250 C175,285 225,285 240,250");
      }
      100% {
        d: path("M160,250 C175,285 225,285 240,250");
      }
    }

    @keyframes eyes-ani {
      0% {
        stroke-dashoffset: 0;
      }
      20% {
        stroke-dashoffset: 0;
      }
      80% {
        stroke-dashoffset: 38;
      }
      100% {
        stroke-dashoffset: 38;
      }
    }

    #mouth {
      animation: smile 3s infinite alternate;
    }

    .eyes {
      animation: eyes-ani 3s infinite alternate;
      fill: none;
      stroke: black;
      stroke-width: 7;
      stroke-dasharray: 38;
      stroke-dashoffset: 38;
    }
  </style>

  <rect x="0" y="0" width="400" height="400" fill="skyblue" />
  <circle stroke="black" stroke-width="7" fill="yellow" cx="200" cy="200" r="100" />
  <circle class="eyes" r="12" cx="160" cy="175" />
  <circle class="eyes" r="12" cx="240" cy="175" />
  <path id="mouth" d="M160,250 C175,250 225,250 240,250" stroke-linecap="round" stroke="black" stroke-width="7" fill="none" />
</svg>

---

- Summary

Finally! You’ve learnt something interesting! Go forth and animate!

In the next lesson we will look at how to integrate these animations into a website.

I hope this post was helpful. Please get in touch with any feedback you have:

- Resources

• SVG Line Animation
• Path Attribute
• @keyframes