Перемещение рисунка вслед за курсором мыши

В преддверии Рождества и Нового Года, я решил сделать небольшое украшение для своего сайта в виде картинки с Санта-Клаусом, которая всегда перемещалась бы вслед за курсором мыши.

Движение картинки за курсором мышки

Вполне естественно, что движение объекта вслед за курсором, я решил реализовать на Javascript. Также, очень важным для меня было сделать плавное перемещение картинки и чтобы она не перекрывала собой курсор. То есть находилась на некотором расстоянии от него.

Пример преследования курсора

Код CSS

.item{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: 0.20s linear;
  background: #ccc;
}

#block{
  width: 100vw;
  height: 100vh;
  border:1px solid;
}

Код HTML

<div id="block"></div>

<div class="item"><img style="position:relative;" src="/santa.png" /></div>

Код JS

var item = document.querySelector(".item");
    
block.onmousemove = function (e){
item.style.position = 'fixed';
item.style.left = e.clientX + -40 + 'px';
item.style.top = e.clientY + +20 + 'px';
}