Animate SVG Using CSS3 Keyframes Animation

Learn how to apply CSS3 animation property on SVG paths & animate them. Tutorial for SVG animate tag, CSS3 Keyframes Animation & JavaScript.

So you’ve created a SVG document or added some SVG code in a HTML5 document and want to animate it. SVG can be animated in different ways:

  1. SVG’s animate tag
  2. SMIL
  3. CSS3 Animation Property using Keyframes
  4. JavaScript

In this tutorial I’ll tell you how you can apply CSS3 animation property on SVG paths and animate them. This is a series with two tutorials. In next tutorial of the series you’ll learn how to use jQuery to make SVG animations work on button click.

I believe knowledge of @keyframes can help in following along this tutorial. However I’ll explain things on detail and it should not difficult to understand even if you don’t know about them. So let’s get started!

Creating an SVG Document

Well, we’re not actually going to create a complete SVG document in this tutorial. For our example, we’ll embed SVG in HTML5 document. To start, create a file animate.html in your projects folder. You can name this file however you want. Now if you are using Sublime text or Atom, and have Emmet installed, type ! and hit Tab to get a boilerplate for the document. Or you can copy and paste the following code.

<!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">





Add Points

Now, we’ll create two points with SVG circles to note whence our path begins and where it ends. So, within your and tags, start writing the SVG code. We’ll give our graphic a width and height of 500px. We’ll also create a path connecting two circles. Also, we’ll give ids to every element.

<svg width="500" height="500">

  <!- First circle at (10,10) ->

  <circle class="circle1" cx="10" cy="10" r="4" fill="none" stroke="green" stroke-width="4" />

  <!- First circle at (200,200) ->

  <circle class="circle2" cx="200" cy="200" r="4" fill="none" stroke="green" stroke-width="4" />

  <!- Path connecting two circles ->

  <path class="circle-path" fill="none" stroke="yellow" stroke-width="3" stroke- d="M10,10 L 200 200" />


Add Animation

We’ll write our CSS in a separate file, say style.css. To link the CSS file, add following line in header of your HTML document.

<link rel='stylesheet' href='style.css' type='text/css' />

Before starting animation, I would like you to know about two attributes of SVG which we will be using to animate our graphic.

  1. stroke-dasharray: This attribute is used to change the dashes and spaces between them in a stroke. We can specify length or percentage in this.
  2. stroke-dashoffset: Offset is same as it is used in other contexts. It’s distance before starting the path.

Now, in our graphic, we’ve two circles which are at some distance. We’re using a path to join them. What is our animation supposed to do? Whenever the page is loaded, path will start from one circle and it’ll end up at another. Dasharray tells us the distance between the dashes of stroke.

So if we want the path to begin on page load we will give it an offset of the total length of the path. Which we’ll bring down to 0 in animation to display in completely. Also we’ll keep dasharray equals to offset to not load path on page load.

Now we’ll find the total length of path using JavaScript.

<script type="text/javascript">

  var path = document.querySelector('.circle-path');



In our example, it is approx 268px.

Great, so let’s write some CSS.

.circle-path {
  stroke-dasharray: 268;
  stroke-dashoffset: 268;
  -webkit-animation: dash 5s linear alternate infinite;
  -moz-animation: dash 5s linear alternate infinite;
  animation: dash 5s linear alternate infinite;

@-webkit-keyframes dash {

  to {
    stroke-dashoffset: 0;


@-moz-keyframes dash {
  to {
    stroke-dashoffset: 0;


@keyframes dash {

  to {
    stroke-dashoffset: 0;


The main part is the controls in .circle-path. You can change the animation property according to your requirements. The first ‘dash’ refers to the animation name. Next ‘5s’ is the time taken by the animation to complete, or animation-duration. We are keeping the animation’s timing function to be linear.

Its direction is alternate, i.e. it’ll move forwards and backwards alternatively, for infinite number of times. Other possible values can be forwards and reverse for direction and you can give an integer in place of infinite. If no value is given, animation will take place once.


This sort of animations can be used for a variety of purposes, like if you want to show distance or path from one place to another on a map.

Let us know in comments where you’re gonna apply SVG animations using CSS3!

Share on Facebook Tweet Share on Google+

Post a Comment