I made this page to collect different types of masks and to test how browsers support them. The winner is SVG : )
A quick demonstration of what can be easily done with the video element and SVG masks. Should be compatible with IE9+, please report any errors/compatability problems to firstname.lastname@example.org
Professor X -> Wolverine.
A collection of svg + svg masking combined with HTML and CSS3 animations used to create a nifty button, I wrote a thing about why I had to mask and explained in more detail what's happening here: https://raygun.io/blog/2014/07/making-svg-html-burger-button/
Combine the transparency of a PNG with the compression of a JPEG.
Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG or using <img src="image.svg"/>
A quick demonstration of what can be easily done with animated gradients and SVG masks. Should be compatible with IE10+, please report any errors/compatability problems to email@example.com
A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it's all SVG, the images and captions scale nicely together. GreenSock's Draggable and ThrowProps plugins were used for the slider control.
Demo showing how an SVG mask works and the structure behind it. A study used for an upcoming article on SVG clipping animations.
SVG mask (clip-path) example. Hover for animation.
Animate SVG mask path to give the impression of the text being written.
Need to know how to enable it? Go here.