There isn't actually as much magic as I first thought. The SVG (which is loaded via data URI) actually loads the same cat image again, and blurs it. (The cat URL is hardcoded into that SVG string in the data URI). So you have to know the image URL in advance, and generate a data URI for an SVG that contains it. Therefore this wouldn't work as a CSS-only technique if you wanted a dynamic image URL - you'd need JavaScript for that.

Tip: you can copy the whole data URI into your browser's location bar it will load the SVG. Then you can open devtools and inspect it to see what's going on.

You can use a svg in a url() and in this case it's inlined. If you url-decode it's:

    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920"
         height="1120">
        <defs>
            <filter id="blur">
                <feGaussianBlur stdDeviation="5"/>
            </filter>
        </defs>
        <image xlink:href="http://placekitten.com/1920/1120" width="1920"
               height="1120" filter="url(#blur)"/>
    </svg>