Как создать анимированный эффект при наведении, который до предела следует за мышью? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект наведения, аналогичный тому, который используется на этой веб-странице: https://www.halo-lab.com/
Он используется в Раздел «Наши услуги» для кнопки воспроизведения в правом верхнем углу (прокрутите немного вниз, чтобы увидеть его). Похоже, он использует JS, который меняет значения встроенного стиля, но в пределах ограниченного периметра вокруг него. Во встроенном стиле изначально установлено значение 0.
Я не уверен, как они добились такого движения. Я разобрался с анимационным эффектом изменения цвета, но не с перемещением мыши. У меня есть JS-скрипт с той же стрелкой, но без части движения: https://jsfiddle.net/84qpbxwn/
Я заметил, что этот сайт использует GSAP. Может ли это быть эффект от использования их библиотеки?
HTML:







CSS:
.button-play{
background: #02021e;
color: white;
display: flex;
width: 7rem;
height: 7rem;
border-radius: 50%;
align-items: center;
justify-content: center;
position: relative;
transition: color .4s;
transform: translate(0);
margin: 70px;
}

.button-play__bg{
background-color: #3827c7;
border-radius: 50%;
width: 100%;
height: 100%;
transition: all .3s;
position: absolute;
inset: 0%;
transform: scale(0);
}

.button-play svg{
width: 1.75rem;
height: 1.75rem;
position: relative;
z-index: 2;
}

.button-play:hover .button-play__bg{
transform: scale(1)
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... to-a-limit