Blurring svg shapes as they pass through clip path - svg

Question

Example below:
I'd like to maintain a fixed area in the middle that has svg circles being animated through it.
Most examples I've seen involve some sort of merge that ends up showing both the original circle and the blurred version. Led me to something like this:
<clipPath id="top-mask">
<rect id="top-mask-rect" x="0" y="-100" width="100" height="100" />
</clipPath>
<filter id="top-blur" x="-200%" y="-200%" width="500%" height="500%">
<feimage xlinkHref="url(#top-mask)" result="mask" />
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feComposite in2="mask" in="blur" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
This seems to overlay the circles on top of a slightly blurred version. My next naive step was to remove the feComposite and instead apply clipPath to both feMergeNode which didn't work at all.
What is the correct approach to this problem?

Answer 1

Things are not that elementary. You have to stack things a bit on top of one another for this to work. You need a mask to show the un-blurred object outside, and a filter to show it inside the designated area. Both need units defined as userSpaceOnUse.
#moving {
animation: move 5s ease-in-out infinite;
}
#keyframes move {
0% { transform: translate(0px, 0px) }
50% { transform: translate(300px, 0px) }
100% { transform: translate(0px, 0px) }
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="300" width="500">
<defs>
<mask id="mask"
maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="white" />
<rect id="still" x="150" y="0" width="200" height="300" fill="black" />
</mask>
<filter id="blur" x="150" y="0" width="200" height="300"
filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<g mask="url(#mask)">
<circle id="moving" r="60" cy="150" cx="100" fill="blue" />
</g>
<g filter="url(#blur)">
<use xlink:href="#moving" />
</g>
</svg>
The way the filter works is interesting. It seems the object is clipped before the blur is applied, resulting in a blur near the border of the designated area instead of a hard cut. I am unsure whether to call this a bug or expected behavior. (A quick test showed this both for Firefox and Chrome.)