javascript – How to make a thermal trace from the cursor


I can't figure out how to make the same thermal footprint from the cursor the thermal footprint appears on the top block


If you reduce the code and the load on the browser a little and throw garbage away, it will turn out like this)

$('html').on('mousemove', function(e){
  var bubble = $('<div class="bubble"></div>');
  bubble.css({'left': e.clientX-50, 'top': e.clientY-50});
  setInterval(function(){bubble.remove()}, 1000)
  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{
    width: 100px;
    height: 100px;
    width: 0px;
    height: 0px;
<script src=""></script>
Scroll to Top