Some time last year our lead Front-end developer Robb wrote about how we were using SVG more in projects in his post Setting your images free with SVG.
Now that using SVG in our projects is part of our standard approach we are always looking at ways to use them in more interesting and engaging ways.
One of these ways is to use animation to add some nice user interactions and really make your graphics come to life.
Because SVGs can be used as markup within a webpage then this means we can use CSS to animate them, this opens up a whole host of ways to add interaction to your SVG.
The method we will be looking at in more detail is using path data in SVG to create a effect like the graphic is drawing itself. This can be seen to great effect on polygon's PS4 and Xbox One reviews.
This CSS tricks article breaks down how it works in more detail. Essentially paths in SVG have a stroke, the stroke can be dashed, you can set the size of the dash, you can also set the offset of the dash. Once you combine all these things you can create the effect of the line drawing itself by using CSS to animate the offset.
See the Pen Basic Example of SVG Line Drawing, Backward and Forward by Chris Coyier (@chriscoyier) on CodePen.
For the rest of this blog we will take a more in depth look at using this technique to make something a bit more useful, an animated donut graph for showing statistics.
Breaking it down
In order to see how this was put together lets break down each aspect
First the HTML containing the SVG.
The SVG itself is pretty straightforward. It contains a group with 2 circles one serves as the background the other is the filled part of our graph. cx and cy are the centre of the circle in this case half the full width. r is the radius, instead of the radius being half of the total width it is less as it does not include the width of the stroke, hence here it is 40 ie. the radius minus half the stroke width.
You will also notice the group(g) has a rotation applied to it, this is to set the start point of the circle path to the top, as by default it is on the horizontal axis.
Next lets look at the CSS
Were using SASS here to work out some of the calculations but the most important bit is where we work out the stroke-dasharray, which needs to be the circumference of our circle. We can work this out by using the formula 2ΠR, the standard method for working out the circumference of a circle. In this case we add on 1 pixel just to make sure it really is hidden when its in its initial state.
In this example I have removed the percent value counting up for simplicity.
Again we start of by doing some base calculations and setting up variables.
The function getOffset is an important part of the calculations we need to make, it takes the percentage in and gives back what the offset of the dash should be to indicate that value.
In the remaining script we simply find the percent value of each chart by getting the value from the HTML then using our getOffset function set the dashoffset of the top circle to that value, the CSS handles the rest.
Taking it further
You may notice in the first example the numbers count up from 0 to their final amount, in order to achieve this we have used the great jQuery plug-in CountUp, the plug-in configuration is pretty straightforward and gives a number of options, it adds a great effect to the graph and really sets it off.
Over all I think this gives a nice effect to some static graphs and really brings them to life.
If you found this helpful or have any suggestions then let us know on Twitter.