Animating SVG With Clipping Masks and CSS

SVG animation is pretty popular these days and has lots of potential for innovation and ingenuity. Over the past few months we’ve seen some brilliant examples on the web with the use of jQuery, Snap.svg and even simple CSS.

Having said that, animating SVG elements with pure CSS has its limitations. You can’t really ‘paint’ SVG paths, strokes or fills into the HTML canvas as you can with jQuery and other JavaScript libraries. You can however, animate dash-offsets of paths to give the impression of ‘line-drawing’.
Unfortunately, we can’t animate SVG fills the same way with only CSS. However I’ve thought of way of giving the impression they’re being ‘painted’ by animating SVG clipping masks. To experiment with this idea, I created the demo below as an example of what’s possible with clipping mask animation. You can also download the source files for deeper inspection.

Download Source Files View Demo

Although I won’t go through the ins-and-outs of the demo, I’ll explain the theory behind the technique as simply as possible. Here’s how it works:

---

What is a clipping mask?

Incase you’re unfamiliar with it, a clipping mask is a path or object that masks other paths. Paths or groups that are clipped by a mask will have a display-area masked by the shape and position of their clipping parent. Let’s look at an example in Illustrator to better understand things visually.

---

We have a circle

Let’s say we draw a simple circle with a pink fill.

---

We Duplicate That Circle and Remove its fill

Now we have two circles ontop of each other – the bottom one with a pink fill and the top with no fill. There’s no visual difference yet.

---

Now make the duplicate a clipping mask

To create a clipping mask, select the group and click ‘Make/Release Clipping Mask’ – Illustrator will then use the top most layer of that group as a clipping mask for all paths underneath it . So since we clipped the filled circle with the duplicate, the pink circle is now masked by the duplicate. Because they are both the exact same size and in the same position, the pink circle is still visible.

---

Now move the clipping mask

If we move the clipping mask, the pink circle becomes masked by the shape of the clip.



Now let’s turn this into a CSS animation.

---

The code

In XML, SVG clipping paths work like this:

<svg>

<defs>
<path id="ID_OF_THE_ACTUAL_PATH">
</defs>

<clipPath id="CLIPPING_MASK" >
<use xlink:href="#ID_OF_THE_ACTUAL_CLIPPING_PATH" />
</clipPath>

<path id="pink-circle" style="clip-path:url(#CLIPPING_MASK)" />

</svg>

The actual path of a clipping mask needs to be defined in a ‘<defs>’ container element with an id. ‘defs’ stands for definitions and is a grouping element for things like gradients and clipping paths. That path is then linked in a ‘<clipPath>’ via its ID with an ‘xlink’. Paths can then be clipped by that mask via CSS with ‘clip-path:url(#ID)’. Note that the ID referenced here is that of the actual ‘<clipPath>’ element, NOT THE ID OF THE PATH ITSELF. Illustrator outputs all of this automatically when you save as an SVG, albeit not very cleanly.

Setting Things Up

So for our pink circle example the code would be like this:

<svg version="1.1" id="svg-circle" width="150px" height="150px">

<defs>
<circle id="clipmaskpath" cx="72.375" cy="76.625" r="45.875"/>
</defs>

<clipPath id="clipmask">
<use xlink:href="#clipmaskpath" style="overflow:visible;"/>
</clipPath>

<circle style="clip-path:url(#clipmask)" cx="72.375" cy="76.625" r="45.875"/>

</svg>

---

Animating the clipping path

Now let’s animate it the clipping path:

#svg-circle #clipmask {
animation: move-mask infinite running 2s ease;
}
@keyframes move-mask {
0%, 100% {transform: translateY(-90px)}
50% {transform: translateY(0px)}
}

That’s it! Here’s a working example over on CodePen

---

This is just a simple example of how the theory works. You can experiment with different CSS transforms (including 3d)  to create some really interesting effects.

A note on FireFox

In theory, animating SVG clipping paths should work on all browsers. However it seems to work only on webkit – Safari and Chrome. Firefox still renders clippings paths, however from my testing they’re not animatable with CSS (yet). Hopefully it gets support soon. However it still makes sense to vendor prefix everything correctly to ensure things are future-proof. In the meantime, if you need cross-browser compatibility, you could always use fallback opacity effects targeted at other browsers to have some sort of fallback effect.

Download Source Files View Demo