class Dot {
  constructor(speed) {
    this.x = 0;
    this.y = 0;
    this.speed = speed;
  }
    
  create() {
    const dotEl = document.createElement('div');
    dotEl.className = 'trail';
    this.el = dotEl;
    return dotEl;
  }
}
    
const dots = [];

for (let i = 0; i < 12; i++) {
  const dot = new Dot(i + 1);
  document.body.appendChild(dot.create());
  dots.push(dot);
}

let mouse = { x: 0, y: 0 };

window.addEventListener('mousemove', event => {
  mouse.x = event.pageX - 3;
  mouse.y = event.pageY - 3;
});

const draw = (time, lastTime) => {
  dots.forEach(dot => {
    /*if (lastTime != null) { Account for frame rate differences }*/

    dot.x += (mouse.x - dot.x) / dot.speed;
    dot.y += (mouse.y - dot.y) / dot.speed;
    
    dot.el.style.left = dot.x + 'px';
    dot.el.style.top = dot.y + 'px';
  });

  requestAnimationFrame(newTime => draw(newTime, time));
}
  
requestAnimationFrame(draw);