AnIcons

Small demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard. Update: Happy that there is now a CSS Masking Spec.

See the Pen Animated icons by simurai (@simurai) on CodePen.

Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on.

The basics of this demo goes something like this:

1. Add a texture and gradients to your element’s background.
2. Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape.
3. Use a second shape together with mask-composite to either add (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask.
4. Add some transitions/animations to the mask-position.

So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-)

Couple notes:

• Pseudo elements (highlight on the cloud) also gets masked.
• CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape.
• For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture.
• I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them.
• Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting.