title: How to invert a css clip-path or animate hard-stops in SVG radial gradients
body: <p>It seems that generally a css clip-path is used to hide beginning at the edges of an element. I can use something like this:</p>
  
  <p><code>clip-path:circle(70% at center);</code></p>
  
  <p>and get something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/LkLAV.png" alt="enter image description here"></p>
  
  <p>Is there a way I can invert that? I want my result to be something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/73Mjr.png" alt="enter image description here"></p>
  
  <p>I want to clip the center of the image, not the edges. It's an SVG, so I tried something like this pen, animating a radial gradient: <a href="http://codepen.io/ethanclevenger91/pen/myMYwQ" rel="nofollow noreferrer">http://codepen.io/ethanclevenger91/pen/myMYwQ</a></p>
  
  <p>But that didn't work like expected. There's the animated one and then one with what I assume the final step of the animation cycle should look like, but it doesn't. Any light on either of these would be appreciated.</p>