Blur on resize

blur.js

  // Adjust blur on resize.
  var proto = Object.create(HTMLElement.prototype);
  proto.attachedCallback = function()
  {
    var feGaussianBlur = this.query('feGaussianBlur')
    var MAX_DEVIATION = 10
    var MIN_DEVIATION = 3
    var MIN_WIDTH = 320
    var MAX_WIDTH = 1366
    var k = (MAX_WIDTH - MIN_WIDTH) / (MAX_DEVIATION - MIN_DEVIATION)

    function calculateDeviation()
    {
      var width = global.innerWidth
      if (width > MAX_WIDTH) return MIN_DEVIATION
      else
      {
        var diff = width - MIN_WIDTH
        return MAX_DEVIATION - diff / k
      }
    }

    function setDeviation(deviation)
    {
      feGaussianBlur.setStdDeviation(deviation, deviation)
    }

    function updateDeviation() {
      var deviation = calculateDeviation()
      setDeviation(deviation)
    }

    on(window, 'resize', updateDeviation)
    updateDeviation()
  };

  var platformBlur = document.registerElement('platform-blur',
  {
    prototype: proto
  })