<!-- Code by Fedyaeva -->
<style>
    :root {
        /*Ниже размеры, обводка, заливка и режим наложения курсора*/
        /*Радиус скругления и время появления при наведении*/
        --widthCursor: 12px;
        --heightCursor: 12px;
        --borderCursor: 1px solid #0B0B0B;
        --bgCursor: #0000FF;
        --blendMode: none;
        --radiusCursor: 8px; 
        --timingCursor: 0.3s;
    }
    /*Заменить название класса clickable*/
    .clickable {cursor: none;}
    .cursor {position: fixed;width: var(--widthCursor);height: var(--heightCursor);border: var(--borderCursor);background-color: var(--bgCursor);border-radius: var(--radiusCursor);pointer-events: none;will-change: contents;transform: translate(calc(-50% + 12px), calc(-50% + 12px));z-index: 100000;}
    .cursor__inner {display: flex;align-items: center;justify-content: center;opacity: 0;transition: all var(--timing-cursor) ease-in;}
    
    .cursor--hovered {
        /*Шо делать с курсором будем при наведении?*/
        /*Меняем размер, отменяем обводку, меняем радиус и режим наложения*/
        /*Чтобы раскомментить строку нужно удалить звездочку и слеш до и после свойства*/
        /*width: 186px;*/
        /*height: 186px;*/
        /*border-radius: 10px;*/
        background-color: transparent;
        mix-blend-mode: var(--blendMode);
        border-color: transparent;
    }
    .cursor--hovered .cursor__inner {opacity: 1;}
</style>

<div class="cursor">
  <div class="cursor__inner">
    <!-- Заменить ссылку, написать размеры -->
    <!-- А можно просто все удалить отсюда, чому нет-->
    <img src="https://static.tildacdn.com/tild3862-6266-4432-b638-343037646337/Frame.svg" alt="Cursor Arrow" width="73" height="94">
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    // Заменить название класса на свое
    const hoverElements = document.querySelectorAll(".clickable");
    const cursor = document.querySelector('.cursor');
    const speed = 0.1; //Скорость курсора между 0 и 1
    let scale = 1; 
    
    hoverElements.forEach(e => {
        e.addEventListener("mouseover", function() {
            cursor.classList.add("cursor--hovered");
        });
        e.addEventListener("mouseleave", function() {
            cursor.classList.remove("cursor--hovered");
        });
    });


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


    const updatePosition = () => {
        pos.x += (mouse.x - pos.x) * speed;
        pos.y += (mouse.y - pos.y) * speed;
        // Увеличивать размер скролла при движении вниз-вверх
        // Можно заменить y на x и поменять коэффициент
        // scale += (mouse.y - pos.y) * 0.0001;
        cursor.style.left = pos.x + 'px';
        cursor.style.top = pos.y + 'px';
        // Эта строчка тоже для изменения размера
        // cursor.style.transform = 'scale(' + scale + ')';
    };

    const updateCoordinates = e => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
    }

    window.addEventListener('mousemove', updateCoordinates);

    function loop() {
        updatePosition();
        requestAnimationFrame(loop);
    }

    requestAnimationFrame(loop);
});
</script>