<img src="https://jordizle.com/static/img/avatar.jpg" />

html {
  width: 100%;
  height: 100%;
  background: #252525;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  position: absolute;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  left: 50%;
  top: 50%;
}

function Interpolater(data) {
  const self = this
  this.fraction = (typeof data.fraction !== 'undefined') ? data.fraction : 0.5
  this.trackSpeed = (typeof data.fraction !== 'undefined') ? data.trackSpeed : 200
  this.parent = data.elements.parent
  this.mouse = data.elements.mouse
  this.step = data.step
  this.x = (window.innerWidth / 2)
  this.y = (window.innerHeight / 2)
  this.parent.onmousemove = function(e) {
    self.x = e.clientX - this.offsetLeft
    self.y = e.clientY - this.offsetTop
  }
  this.cords = [ { x: this.x, y: this.y }, { x: this.x, y: this.y } ]
  this.track()
}
Interpolater.prototype.track = function() {
  const self = this
  const mouseCords = setInterval(function() {
    self.cords.push({ x: self.x, y: self.y })
    self.cords.shift()
    self.calculate((position) => {
      position.x = position.x - 51.5
      position.y = position.y - 51.5
      self.step({
        mouse: self.mouse,
        position: {
          x: position.x,
          y: position.y
        }
      })
    })
  }, self.trackSpeed)
}
Interpolater.prototype.calculate = function(callback) {
  const nx = this.cords[0].x + (this.cords[1].x - this.cords[0].x) * this.fraction
  const ny = this.cords[0].y + (this.cords[1].y - this.cords[0].y) * this.fraction
  callback({ x: nx, y: ny })
}

new Interpolater({
  trackSpeed: 200,
  fraction: 0.5,
  elements: {
    parent: document.getElementsByTagName('body')[0],
    mouse: document.getElementsByTagName('img')[0]
  },
  step: function(data) {
    console.log(data)
    data.mouse.style.left = data.position.x + 'px'
    data.mouse.style.top = data.position.y + 'px'
  }
});