svg filter blur test

HTML

<div class="wrap blur">
    <p class="text">
        Kevin ball tip jerky strip steak shoulder kielbasa. Turducken prosciutto cow meatloaf corned beef spare ribs, kevin chicken meatball tail frankfurter pork loin. Pork belly chicken ham hock beef ribs leberkas pig. Pork chop flank ribeye capicola shankle ground round sirloin andouille ham hock chicken tri-tip spare ribs rump porchetta pork. Pastrami sirloin turkey, landjaeger ribeye fatback meatball tongue drumstick swine. Pastrami ribeye beef ribs rump hamburger meatball tenderloin salami brisket landjaeger kevin.
    </p>
</div>
<div class="layer">
    <button class="toggle">Toggle Blur</button>
</div>

CSS

body {
    margin: 0;
    font: 1em/1.5 sans-serif;
    color: #444;
}
p {
    width: 50%;
    margin: 10% auto 0;
}

.wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('http://fc02.deviantart.net/fs71/i/2013/276/e/5/dawn_at_the_beach_by_emuman-d5ergeh.jpg') 50%;
    background-size: cover;
}
.text {
    padding: 1ex 1em;
    background: rgba(255,255,255,.32);
    border-radius: 2px;
}

.blur {
    filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0"><defs><filter id="blur"><feGaussianBlur stdDeviation="3"/></filter></defs></svg>#blur');
    -webkit-filter: blur(2px);
    -ms-filter: blur(2x);
    filter: blur(2px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
}

.layer {
    position: absolute;
    z-index: 10;
    bottom: 30%;
    width: 100%;
    text-align: center;
}
.toggle {
    position: relative;
    padding: 1ex 1em;
    font-weight: 700;
    color: #333;
    background: #fc0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 3px #000;
}
.toggle:active {
    bottom: -1px;
    box-shadow: 0 0 2px #000;
}

JavaScript

$('button.toggle').on('click',function(e){
    $('div.wrap').toggleClass('blur');
});