Comm 328 Responsive Web Design

SVG Animation

There are two basic categories of simple SVG animations. More complex effects and combinations can be achieved with JavaScript libraries like snap.svg.

Animation with pseudo-classes (:hover)

SVGs can be 'animated' by using CSS to manipulate different properties. Common things to change are:

  • fill
  • stroke
  • transform properties (rotation, position, scale, skew)

It is easiest to use a pseudo-class like :hover to trigger these animations.

Below we have a simple SVG circle with a gray fill. We're using the hover state to change the fill to pink.

<svg id="ex1" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ex1 circle {
      fill: gray;
    }
    #ex1 circle:hover {
      fill: pink;
    }
  </style>
  <circle cx="75" cy="75" r="75" />
</svg>

If you had a more complicated shape, you could animate just part of it by adjusting your selector.

Here we have two circles. We'll change the color of the smaller circle whenever we hover over the entire SVG image.

<svg id="ex2" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<style>
	#ex2 .outer {
		fill: gray;
	}
	#ex2 .inner {
		fill: red;
	}
	#ex2:hover .inner {
		fill: pink;
	}
	</style>
	<circle class="outer" cx="75" cy="75" r="75" />
	<circle class="inner" cx="25" cy="25" r="25" />
</svg>

Add a Transition

The key to making these changes look more graceful is to add a CSS transition. This will simply "transition" the specified property change. You can read up on the transition property on the Mozilla Develop Network.

Taking the first example, we can modify it to transition the fill change over a period of time. It's important to note that the transition should go on the initial state of the element rather than the changed state. 
<svg id="ex3" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ex3 circle {
      fill: gray;
      transition: fill .5s ease-in;
    }
    #ex3 circle:hover {
      fill: pink;
    }
  </style>
  <circle cx="75" cy="75" r="75" />
</svg>

More Examples

A careful and thoughtful implementation of these techniques can yield very sophisticated results. A fantastic example of this is the delightful demonstration by the makers of the Iconic icons set. This was a proof of concept on animating SVG icons.

Also check out this set of animated icons on Code Pen.

Additional Resources

For more information on SVG animation, see the resources below.

SVG Line Animation

SVG line animation takes a slightly different approach in animating. The first difference is that instead of animating shapes, you animate the path element (and sometimes polyline). The path element is the SVG equivalent to the pen tool.

SVG line animation is really somewhat of an illustration of drawing a line. This is done by modifying the stroke-dasharray and stroke-dashoffset properties. It's best demonstrated by example.

We set the stroke-dasharray property to be equal to the total length of the path. We then set the stroke-dashoffset to be either 0 or the length of the path, depending on the direction we want the drawing to happen in. When we trigger the animation, we'll change the stroke-dashoffset to the opposite value. We still use the transition property to make it animate.

Here we have a simple line path.

<svg id="ex4" xmlns="http://www.w3.org/2000/svg" viewBox="100 200 1080 240">
			<style>
			#ex4 path {
				fill: none;
				stroke: black;
				stroke-width: 8px;
			}
			</style>
			<path d="M181,266c6.259324284800016,-144.79776015789997,168.7597092008,201.2022217284,314,44c62.24029079920001,-146.2022217284,184.76732259510004,81.35544128800001,272,-72"/>
			</svg>

Now we'll animated it one way.

<svg id="ex5" xmlns="http://www.w3.org/2000/svg" viewBox="100 200 1080 240">
			<style>
			#ex5 path {
				fill: none;
				stroke: black;
				stroke-width: 8px;
	
				stroke-dasharray: 720;
				stroke-dashoffset: 0;
				transition: stroke-dashoffset 4s linear;
			}
			#ex5:hover path {
				stroke-dashoffset: 720;
			}

			</style>
			<path d="M181,266c6.259324284800016,-144.79776015789997,168.7597092008,201.2022217284,314,44c62.24029079920001,-146.2022217284,184.76732259510004,81.35544128800001,272,-72"/>
			</svg>

And then the other way

<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="100 200 1080 240">
			<style>
			#ex6 path {
				fill: none;
				stroke: black;
				stroke-width: 8px;
	
				stroke-dasharray: 720;
				stroke-dashoffset: 720;
				transition: stroke-dashoffset 4s linear;
			}
			#ex6:hover path {
				stroke-dashoffset: 0;
			}

			</style>
			<path d="M181,266c6.259324284800016,-144.79776015789997,168.7597092008,201.2022217284,314,44c62.24029079920001,-146.2022217284,184.76732259510004,81.35544128800001,272,-72"/>
			</svg>

Fancy Example Demos

JavaScript Libraries

There are several JavaScript libraries to help you with SVG animation. One easy to use and interesting one for SVG Line animation is Lazy Line Painter. With this library you can drop your SVG graphic into the web page and it will generate most of the code you nee to use for it.

More Resources