SVG slow when using shadows - optimization

Question

I am working on a website where you create svg artwork, which means you can dynamically add elements, scale, color and move them around.
Thing is, when you starting putting shadows on them, everything will start to slow down. For a live demo of this, this is the website I am working on.
I made a codepen which shows exactly the problem, try scrolling down the window in this codepen.
body {
margin: 0;
}
<!-- this SVG is created using the free tool over at www.material101.com -->
<svg height="1080" width="1920">
<defs>
<filter filterUnits="userSpaceOnUse" id="shadow-1">
<feFlood flood-opacity="0.12" flood-color="rgb(0,0,0)" result="flood" id="feFlood4286" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4288" />
<feGaussianBlur in="composite" stdDeviation="1.5" result="blur" id="feGaussianBlur4290" />
<feOffset dx="0" dy="1" result="offset" id="feOffset4292" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4294" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4332" />
<feFlood id="feFlood4334" flood-opacity="0.24" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4336" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4338" in="composite" stdDeviation="1" result="blur" />
<feOffset id="feOffset4340" dx="0" dy="1" result="offset" />
<feComposite id="feComposite4342" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-2">
<feFlood flood-opacity="0.16" flood-color="rgb(0,0,0)" result="flood" id="feFlood4348" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4350" />
<feGaussianBlur in="composite" stdDeviation="3" result="blur" id="feGaussianBlur4352" />
<feOffset dx="0" dy="3" result="offset" id="feOffset4354" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4356" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4358" />
<feFlood id="feFlood4360" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4362" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4364" in="composite" stdDeviation="3" result="blur" />
<feOffset id="feOffset4366" dx="0" dy="3" result="offset" />
<feComposite id="feComposite4368" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-3">
<feFlood flood-opacity="0.19" flood-color="rgb(0,0,0)" result="flood" id="feFlood4377" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4379" />
<feGaussianBlur in="composite" stdDeviation="10" result="blur" id="feGaussianBlur4381" />
<feOffset dx="0" dy="10" result="offset" id="feOffset4383" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4385" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4387" />
<feFlood id="feFlood4389" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4391" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4393" in="composite" stdDeviation="3" result="blur" />
<feOffset id="feOffset4395" dx="0" dy="6" result="offset" />
<feComposite id="feComposite4397" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-4">
<feFlood flood-opacity="0.25" flood-color="rgb(0,0,0)" result="flood" id="feFlood4421" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4423" />
<feGaussianBlur in="composite" stdDeviation="14" result="blur" id="feGaussianBlur4425" />
<feOffset dx="0" dy="14" result="offset" id="feOffset4427" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4429" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4431" />
<feFlood id="feFlood4433" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4435" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4437" in="composite" stdDeviation="5" result="blur" />
<feOffset id="feOffset4439" dx="0" dy="10" result="offset" />
<feComposite id="feComposite4441" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-5">
<feFlood flood-opacity="0.3" flood-color="rgb(0,0,0)" result="flood" id="feFlood4451" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4453" />
<feGaussianBlur in="composite" stdDeviation="19" result="blur" id="feGaussianBlur4455" />
<feOffset dx="0" dy="19" result="offset" id="feOffset4457" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4459" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4461" />
<feFlood id="feFlood4463" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4465" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4467" in="composite" stdDeviation="6" result="blur" />
<feOffset id="feOffset4469" dx="0" dy="15" result="offset" />
<feComposite id="feComposite4471" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#e57373" />
<rect x="0" y="0" width="200" height="200" fill="#c62828" transform="matrix(9,0,0,8,-675,-436)" filter="url('#shadow-3')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(0,0,5.0354,4.8626,-172.7689,-111.1304)" filter="url('#shadow-5')" style="cursor: pointer;" />
<rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.309,-0.9511,0.9511,-0.309,892.796,543.0074)" style="cursor: pointer;" />
<rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.0698,-1.9988,1.9988,-0.0698,307.1017,1179.8581)" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(7.1281,-3.6319,1.816,3.564,519.7993,260.3949)" filter="url('#shadow-4')" style="cursor: pointer;" />
<polygon points="0,0,50,100,100,0" fill="#e53935" x="0" y="0" transform="matrix(1.8794,-0.684,3.0782,8.4572,26.1217,-24.6597)" filter="url('#shadow-5')" style="cursor: pointer;" />
<polygon points="0,0,50,100,100,0" fill="#b71c1c" x="0" y="0" transform="matrix(6.6574,-2.1631,0.618,1.9021,-27.7715,158.0503)" style="cursor: pointer;" filter="url('#shadow-2')" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(0,0,8.9658,0.7844,103.7124,131.7799)" filter="url('#shadow-1')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(-2.8191,1.0261,-1.7101,-4.6985,369.4589,394.6201)" filter="url('#shadow-4')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(1.8264,-0.1598,0.1648,1.8842,381.5187,128.4891)" filter="url('#shadow-3')" style="cursor: pointer;" />
</svg>
Now, I tried seeing what the problem is, but my knowledge is limited. I am sure it is the shadows that are causing this, because it only freezes when shadows are present.
It is also important to know that I let the user choose from 5 different shadows, based on google material, and the higher the level of shadow, the more it freezes. I am also using Snap SVG, but I don't think this has anything to do with it.
Any ideas are greatly appreciated guys.

Answer 1

First problem:
You are specifying that filterUnits=userSpaceOnUse, but then you're not specifying the dimensions that the filter should use. This results in undefined behavior. On Chrome, it seems as if it's setting the filter region as the entire viewBox for every filter - which is resulting in crazy slow performance. Remove the filterUnits declaration and set your filter region to x/y=-50% and height/width ="200%" and you'll get much better performance. i.e.
<filter id="shadow-n" x="-50%" y="-50%" width="200%" height="200%">
With this, you're still a bit slow, but at least you can scroll the page!
Second problem:
You're doing a lot of compositing and blur operations and compositing is slow (at least in Chrome - they're pretty fast in Edge). Instead of doing multiple separate blurs and compositing them, you should be doing a single blur and then shaping the opacity with a feComponentTransfer/feFuncA. You can get a sense for how to do this from a filter generator I built for dropshadows which you can see here:
http://codepen.io/mullany/pen/sJopz
Adjust the spread and size slider and see how the generated code changes.
All that said, complicated SVG Filters can be slow, period. My hope has been that the Chrome team GPU-accelerates them, but unfortunately, they seem to only be paying attention to accelerating things that are used by CSS filter effects.