SVG filter with CSS transitions

I was doing and svg filter with css animation. I use

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
   </filter>
 </defs>
</svg>

and

filter:url('#goo');

for container in CSS.

Here is a fiddle https://codepen.io/sergey_mell/pen/MoRMwR

And I got stuck into next issue. The animation appears to be carrying out like inside some box (it's size seems to be depend on initial animation state size). Can anybody help me to avoid this?

SVG filter with CSS transitions

3 Answers