Slicing SVG 9 Ways
Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well:
The shadow may need to move around or fade, so we need a solution that we can animate with transforms & opacity, since they can be handed off to the GPU. It will need to be separate to the element it’s shadowing, since we will likely want to fade and move it without affecting the other element.
He tried box-shadow and filter: blur(), but both aren’t performant enough.
He tried an SVG element with a blur filter, but SVG alone can’t do 9-slice scaling (necessary to keep the corners from scaling awkwardly).
The winner was using an SVG image but applying it to an element via border-image, which essentially 9-slice scaling.
Direct Link to Article — Permalink
Slicing SVG 9 Ways is a post from CSS-Tricks
