CodePen Embed - Gaussian Blur applied through SVG blur filter applied to a SVG text element

<!-- Legacy code used as example code on http://css-plus.com/2012/03/gaussian-blur/ -->
<p>Hover over blurred text to see the effect</p>

<svg id="svg-el-blur">
    <text x="0" y="50">
        SVG Blur
    </text>
</svg>
<svg id="svg-effects">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="0.9" />
    </filter>

    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

#svg-el-blur { height: 60px; width: 100%; }
    #svg-el-blur text { fill: green; filter:url(#blur-effect-1); font: 50px sans-serif; }
    #svg-el-blur text:hover { filter:url(#blur-effect-2); }

.lt-ie9 #svg-el-blur text { color: green; }

/* Codepen styling */
p { color: #aaa }

View Compiled

This Pen is owned by Jamy on CodePen.

See more by @jamygolden on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.