Paul Irish

Making the www great

SVG Filters on HTML5 Video

This weekend I hung out with some SVG all-stars and learned how SVG, HTML, and CSS can combine for some badass visual filters applied to content. Clearly it’s the most fun to apply it to <video>, though I could have done it to any HTML.

Demo page: SVG filters on html5 <video> Up/right arrow keys are fun, too.

Blur is certainly the most useful, I’d say. For instance, Mike Matas’s new site could dynamically blur the images instead of manually cutting blurred jpgs.

Leave a comment if you can think of other use cases for filters like these on your HTML content.

2016.9.25: Was using a swf for video on this page; 2010 was hilarious. Now just a static image. :)