Skip to Content Skip to Navigation

Animating with SVG

17 July 2014

The digital space affords us many opportunities to push design beyond static presentation and incorporate delight through unique experiences and engagement. This is something we consider with all of our projects, not to mention in our own new website. One component in particular stands out based on the feedback we’ve received, and that’s the simple animation of our logo when being hovered with the mouse.

We had a lot of fun putting this together, and since we’ve received numerous questions on the construction, we thought we’d share our process.

The Idea

The concept came about quite naturally. In an effort to retain the minimal approach for our new site, and a desire not to have a direct ‘back to home’ link, the logo was the perfect fit. While this tends to conflict with general accessibility principles (logos aren’t necessarily an obvious indicator back to home), our homepage is only core to our brand – not our content – and we felt that the homepage wasn’t important enough to warrant its own spot in the navigation.

Apart from just adding a link to the logo, we wanted to create a sense of reward for visitors who were keen enough to spend some time exploring the detail. Our original logo incorporated some simple animation within the mark, and we wanted to give a bit of a throwback to this as well. The simple conclusion – we’ll change up the head in the mark for a symbol that represents home on hover.

With CSS and a basic image fade this would have been pretty easy, but we wanted to see how far we could take it. Once we realised that the letters of Humaan match up pretty closely with ‘home’, we had all we needed to go forward and SVG animation was the answer.

Humaan Logo Animation

Animating with SVG

While SVGs are generally pretty simple to construct, animating them is a different matter altogether. Luckily there’s some great libraries that simplify the task at hand, such as Snap.svg and Raphaël.

Raphaël is a powerful and capable library for manipulating SVGs. This library is backwards-compatible so that it includes support for browsers as far back as IE6. Unfortunately this does mean that some useful features weren’t included, such as non-rectangular clipping masks (which were crucial for our needs).

Snap.svg tends to be a leaner choice, and more suitable for our requirements. It has a smaller file size and includes great support for modern browsers such as Internet Explorer 9 and above. Snap.svg makes working with SVG assets as easy as jQuery makes it to work with the DOM. In the end, it was an easy choice.

The Execution

In order to get started, the first thing we did was create the .svg image in Illustrator (you could use any application that works with vector objects and can export to SVG, such as Inkscape).

To keep everything portable we will be storing the path string (that is, the entire svg object) directly inside our Javascript file. Once we’ve saved out our SVG graphic, we open the file using a text editor and look for the path element. It should look something like this:

<path d="M10.204,17.703c0,3.872,3.093…

We will need everything inside the `d` attribute (this is the string representation of the path) for our purposes. We simply copy and pasted the path strings we require and created a Javascript variable to store all the paths.

It’s worth noting that in all of our examples we’ve used jQuery, however you don’t need jQuery to use Snap.svg. Snap.svg works independently of any Javascript library.

View the static head here.

Another benefit of Snap.svg is that it comes with an animation library which makes it easy to interpolate attribute values ie. colour, circle radius, and even paths. Our intention was to fill the circle on hover and invert the home graphic, and the library made this all possible.

View the animation so far here.

As you can see in the example, the elastic bounce applied to the head animation spills outside of the ring. To counter this we use a circle mask. Instead of using a circle path from an SVG file it’s easier to just create the circle using Snap.svg’s circle function.

View the masked animation here.

To punch out the tent we used a set of both big & small tent paths as masks. As before, we created the .svg files in Illustrator and copied the path string into the Javscript file. We then applied the mask to the object group we created earlier.

The result can be viewed here

So far everything works well, though there’s an obvious gap caused by the small tent mask. To improve the appearance we added a small 3-pixel radius solid circle on top of the gap at a specific point of the animation sequence.

View the finished logo here

For the animated letters, everything came down to pre-planning the individual parts of the animation in sequence. It is much easier to break up each character into sub paths that we can animate independently using a combination of rotation, translation & scaling transforms. The following animation illustrates the starting and end shapes of the A and E. Combining these with an opacity animation yields the final result shown on the far right.

AE SVG Animation

The U and O animations were a little different. We created an additional path (a shorter U) and animated the standard U path into the shorter path whilst simultaneously rotating it 270 degrees clockwise.

UO SVG Animation

The outcome is one that is relatively simple in idea, but is unified and engaging through execution.

Animated logo

Hopefully that this sheds some light into animating with SVG and the process we covered for our own purposes. If you have any questions or examples of your own, send them through below!

Like this post? Keep up with us on Twitter and Instagram.