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: https://www.reddit.com/r/webdev/comments/6544mh/how_is_this_website_doing_the_motion_blur_thing/dg7ar6l/

Thumbnail
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 Codepen.io
Copyright Flamov ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <!-- 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="http://lorempixel.com/400/200/" id="image">

<!-- SVG Blur Filter -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur id="devi" stdDeviation="0, 0"></feGaussianBlur>
    </filter>
  </defs>
</svg>

<!-- Further reading -->
<h2>Further reading:</h2>
<ul>
  <li><a href="https://developer.mozilla.org/en/docs/Web/CSS/filter">https://developer.mozilla.org/en/docs/Web/CSS/filter</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stdDeviation">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stdDeviation</a></li>
</ul>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Flamov/svg-blurring-filter-demonstration-YVzRpy */
#image {
  -webkit-filter: url(#svgBlur);
  filter: url(#svgBlur);
}


/*Downloaded from https://www.codeseek.co/Flamov/svg-blurring-filter-demonstration-YVzRpy */
// 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);
  
});

Comments