dj_coder

Thanks! That worked, though the blur did not work in FF, only Chrome. I assume its the svg part, since I tried another code sample with the same problem (http://codepen.io/joemidi/pen/omsrL). It blurred several objects and two svg elements did not show in FF.

I'm new to using code pen so I'm missing something. I copied the code from that link to a file but it doesn't run. I copied html to inside the body tag, css to a style tag, js to a script tag. I get a black box, four buttons and no animation. What am I missing?

New to html5, coming from actionscript.... I need to figure out how to hand-code animated clipping paths that work across browsers. I did a rect and a circle path so far, which animated in Chrome to reveal a pic, but the circle did not work in Firefox. How do I animate a circle clipping path, and a poly clipping path for that matter? I found an example of an animated poly clipping path, but could not reproduce it. Can the circle be done with Greensock or do I have to us CSS animations (whole new area for me...). Hoping for an example I can copy and paste into an html file.