A Pen by Mark Elphinstone-Hoadley.

A-Pen-by-Mark-Elphinstone-Hoadley.markdown

A Pen by Mark Elphinstone-Hoadley

A Pen by Mark Elphinstone-Hoadley on CodePen.

License.

index.html

<div></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="0 0" />
    </filter>
  </defs>
</svg>

script.js

var $filter = $("#svgBlur"),
    filter = $filter.find("feGaussianBlur").get(0),
    $div = $("div");

$.when($.getScript("//cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"),$.getScript("http://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js")).done(function () {
  var onUpdate = function () {
        var position = $div.data("position"),
            x,
            y;
        
        if (position) {
          x = this.x - position.x;
          y = this.y - position.y;
          
          filter.setAttribute(
            "stdDeviation", 
            x + " " + y
          );
        }
        
        $div.data("position",{ 
          x: this.x, 
          y: this.y
        });
      };
  
  Draggable.create(
    $div, {
      type:"x,y", edgeResistance:0.65,bounds: document.body,
      throwProps:true,
      force3D:false,
      zIndexBoost: false,
      onDrag: onUpdate,
      onThrowUpdate: onUpdate
    }
  );
});

style.css

body {
  background: #222;
  width: 100%;
  height: 100%;
}

div {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 20px;
  left: 20px;
  -webkit-filter: url(#svgBlur);
  filter: url(#svgBlur);
}