SVG Blurring Filter Demonstration

In this example below you will see how to do a SVG Blurring Filter Demonstration with some HTML / CSS and Javascript

Explanation for the following reddit thread:

This awesome code was written by Flamov, you can see more from this user in the personal repository.
You can find the original code on
Copyright Flamov ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>SVG Blurring Filter Demonstration</title>
      <link rel="stylesheet" href="css/style.css">



  <!-- Move this to adjust the 'stdDeviation' attribute on the SVG -->
<input type="range" value="0" min="0" max="10" id="slider"></input>

<!-- The image to apply the 'blur' class to -->
<img src="" id="image">

<!-- SVG Blur Filter -->
<svg xmlns="" version="1.1" width="0" height="0">
    <filter id="svgBlur">
      <feGaussianBlur id="devi" stdDeviation="0, 0"></feGaussianBlur>

<!-- Further reading -->
<h2>Further reading:</h2>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>

    <script  src="js/index.js"></script>



/*Downloaded from */
#image {
  -webkit-filter: url(#svgBlur);
  filter: url(#svgBlur);

/*Downloaded from */
// Cache selectors
var slider = document.getElementById('slider');
var image = document.getElementById('image');
var deviation = document.getElementById('devi');

// Add event listener for 'input' events
slider.addEventListener('input', function() {
  // Construct a new value string
  var newValue = String('0, ' + this.value);

  // Set the new value of the stdDeviation attribute
  deviation.setAttribute('stdDeviation', newValue);