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

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

Рух картинки за курсором мишки

Цілком природно, що рух об'єкта слідом за курсором, я вирішив реалізувати на 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';
}