Как сделать тепловой след от курсора

$('html').on('mousemove', function(e){ 
  var bubble = $('<div class="bubble"></div>'); 
  bubble.css({'left': e.clientX-50, 'top': e.clientY-50}); 
  $('body').append(bubble); 
  setInterval(function(){bubble.remove()}, 1000) 
});

.bubble{ 
  position: absolute; 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
  background-color: coral; 
  box-shadow: 0 0 0 0 coral; 
  animation: leave 1s ease forwards; 
} 
@keyframes leave{ 
  from{ 
    width: 100px; 
    height: 100px; 
  } 
  to{ 
    width: 0px; 
    height: 0px; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$('html').on('mousemove', function(e){ 
  var x = e.clientX; 
  var y = e.clientY; 
  var id = new Date(); 
  var sec = id.getSeconds(); 
  var min = id.getMinutes(); 
  var ms = id.getMilliseconds(); 
  var all = min+''+sec+''+ms; 
  $('body').append('<div id='+all+' class="bubble"></div>'); 
  $('#'+all+'').css({'left': x, 'top': y}); 
});

.bubble{ 
  position: absolute; 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
  background-color: coral; 
  box-shadow: 0 0 0 0 coral; 
  animation: leave 1s ease forwards; 
} 
@keyframes leave{ 
  from{ 
    width: 100px; 
    height: 100px; 
  } 
  to{ 
    width: 0px; 
    height: 0px; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>