[Blur filters]

Try clicking "export" from the bottom of the page on Codepen.

 

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 (

See the Pen omsrL by joemidi (@joemidi) on CodePen

). It blurred several objects and two svg elements did not show in FF.

[Blur filters]

regarding svg, take a peak at this demo to see how the AttrPlugin (attribute plugin) can be used to animate blur: 

See the Pen gpDrC by GreenSock (@GreenSock) on CodePen

 

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?

[Clipping paths]

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.