SVG Animation Three Ways: Scalable Vector Graphics

Part 1: Javascript Disco Leaf

Scalable Vector Graphics (SVGs) have created a ton of potential for front end development and graphic design for the web. Using SVG inline allows you to target and manipulate graphic elements just as you can any other DOM element, with special animation possibilities built into front-end technologies and support continuing to grow.

There are three primary ways to animate an SVG. You can use Javascript, you can use SMIL (SVG built-in animation options), and you can use CSS animations. Each way has various levels of support and gives you different options, so I wanted to take some time to understand each type and learn what method I might use for different scenarios.

SVG animation

For this first installment, inspired by the ever-jubilant energy of the party parrot (a good buddy around the Jungle Disk office), I decided to bring some party to the Jungle Disk leaf.

Creating The SVG Code

The first animation I had in mind was a color block rotation similar to a disco dance floor, playing with the simple quadrilateral shapes inside the leaf.

First, I started with the basic logo SVG code:

<svg width="100px" height="auto" viewBox="0 0 53 87" version="1.1">
        <polygon id="path-1" points="52.67871 0.617407954 0 0.617407954 0 86.5269756 52.67871 86.5269756"></polygon>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="junglebug">
            <g id="Fill-1-Clipped">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                <g id="path-1"></g>
                <path d="M47.76201,37.2875648 L28.79811,46.8794704 L28.79811,28.2616913 L47.82321,18.6869108 C47.84481,18.8698798 47.76201,19.0555529 47.76201,19.2430286 L47.76201,37.2875648 Z M26.22231,24.0984688 L7.62291,14.7850728 L26.13591,5.48068984 L44.80461,14.7931847 L26.22231,24.0984688 Z M23.88141,46.8794704 L4.56561,37.2875647 L4.56561,19.227706 C4.56561,19.044737 4.65831,18.8644719 4.67811,18.6860094 L23.88141,28.2616913 L23.88141,46.8794704 Z M23.88141,70.860136 L7.29261,62.5931788 C5.66001,61.7756767 4.56561,60.1316588 4.56561,58.3037707 L4.56561,42.6495499 L23.88141,52.2414556 L23.88141,70.860136 Z M47.31201,10.5578563 L47.28321,10.5578563 L28.16361,1.07681355 C26.89821,0.444984388 25.38171,0.47292548 24.11811,1.10745862 L5.22621,10.6425809 C1.96911,12.2802892 -9e-05,15.5773379 -9e-05,19.227706 L-9e-05,58.3037707 C-9e-05,61.9604482 1.99701,65.2475824 5.26221,66.8825867 L23.88141,76.2221214 L23.88141,86.5269756 L28.79811,86.5269756 L28.79811,76.2221214 L28.79811,70.860136 L28.79811,52.2468637 L28.79811,52.2414556 L47.76201,42.6495499 L47.76201,58.3037707 C47.76201,60.1316588 46.73151,61.7756767 45.09891,62.5931788 L33.36291,68.461709 L33.36291,73.8236943 L47.30391,66.8825867 C50.57001,65.2475824 52.67871,61.9604482 52.67871,58.3037707 L52.67871,19.2430286 C52.67871,15.5800418 50.58621,12.3163423 47.31201,10.5578563 Z" id="Fill-1" fill="#58BA57" fill-rule="nonzero"></path>

One of the best things about SVGs is that they’re fully editable in most vector graphic design software like Illustrator or Sketch. Because the paths in the leaf are pretty complex, I decided to create some new, simple shapes that would be easy to target and appear to fill in the different sections of the leaf. I did this in Sketch, and then exported the result as an SVG.

Disco Leaf Creation

This new group of shapes shows up in the new SVG code as polygon elements.

<g id="Group-2" transform="translate(3.000000, 2.000000)">
    <polygon class="jd-party-polygon" id="Path-2" fill="#EF696A" points="24.2978719 23.4244541 0.265737883 11.7122271 23.6891479 0 47.4306976 11.7122271"></polygon>
    <polygon class="jd-party-polygon" id="Path" fill="#F36ABA" transform="translate(36.178413, 53.699847) scale(-1, 1) translate(-36.178413, -53.699847) " points="24.4970296 35.0600586 47.8597955 47.0756836 47.8597955 72.3396351 24.4970296 60.0146484"></polygon>
    <polygon class="jd-party-polygon" id="Path" fill="#87FFFE" transform="translate(36.010549, 29.708008) scale(-1, 1) translate(-36.010549, -29.708008) " points="24 12 48.0210978 22.7595152 48.0210978 47.4160156 24 34.9282227"></polygon>
    <polygon class="jd-party-polygon" id="Path" fill="#F8F58A" points="0.497029622 35.0600586 23.8597955 47.0756836 23.8597955 72.3396351 0.497029622 60.0146484"></polygon>
    <polygon class="jd-party-polygon" id="Path" fill="#88FF89" points="0 12 24.0210978 22.7595152 24.0210978 47.4160156 1.42108547e-14 34.9282227"></polygon>

Choosing Javascript

With my goal of taking each shape and lighting it up in a different color in a range of colors that I borrowed from the party parrot, I figured a simple Javascript loop would be the most powerful method.

First, I created an array of the shapes I wanted to loop through. After giving each polygon element the class jd-party-polygon i can collect them into an object like this:

var polygons = document.getElementsByClassName(jd-party-polygon);

Then I created a list of colors. I chose five colors because I have five shapes, but you could use more or less colors if you wanted a wider variety or a different visual effect.

var colors = ["#EF696A","#F36ABA","#88FF89","#87FFFE","#F8F58A"];

In a function using a for loop, I take a color from the list and apply it to the fill property of a polygon using .setAttribute(), and do that as many times as there are polygons.

var animateColors = function(polygons,colors) {
  for (var i=0; i < polygons.length; i++) {
    polygons[i].setAttribute('fill', colors[i]);

So, this loop will set the color of each polygon once. Knowing that I want to call this loop over and over with a new color for each shape, I then take the first color from the array and move it to the end. This has the effect of using the next color in the list for any given shape each time the function is called, creating a rotation effect.

var animateColors = function(polygons,colors) {
  for (var i=0; i < polygons.length; i++) {
    polygons[i].setAttribute('fill', colors[i]);

Last, I set the interval at which I want this function to run. As helpful practice, I use a variable to hold the interval, so that if I ever wanted to stop the effect I could call clearInterval() on that variable.

var animation = setInterval(function() { animateColors(polygons,colors); },200);

Giving the interval a timer of 200 milliseconds gives me the intense, somewhat-hard-to-look-at-but-definitely-hype look that I’m going for.

Browser Support

Using Javascript to animate SVGs is one of the best ways to ensure that the behavior of your animations is consistent across browsers. Any browser environment that uses Javascript will support your animation.

Full Code

View on JSFiddle

Protect Your Business Data

We are passionate about helping our customers protect their data. We want you to use Jungle Disk to protect yours. Click on Sign Up to get started. It takes less than 5 minutes!

Sign Up