Как написать такую красоту на javascript?

Question

[xenonhammer]

Не прошу писать код, просто хочется понять, как это работает.
Предполагаю есть несколько площадей при попадании на которые срабатывает setTimeOut с разным интервалом. По мере приближения к кнопке происходит попадание на заданные площади и уже определяет частоту происходящих сердцебиений или каких либо других событий, как вы думаете?
видео
я еще толком ничего не понимаю в js. Учусь, по этому все ваши гипотезы будут мне отдушиной!

Comments

[Vladislav]

это на css можно сделать
https://habr.com/ru/post/137197/

[Rustam Bainazarov]

Владислав, нет, нельзя. Он про то, что чем ближе курсор, тем быстрее оно бьётся.

[xenonhammer]

Владислав, Да, я про приближение курсора

[RAX7]

xenonhammer, откуда это? уже 3 вопрос здесь с эти сердечком

[xenonhammer]

RAX7, конкретно это сердечко из статьи с vc.ru про тенденции дизайна 2020

Answer 1

[Kovalsky]

Можно например внутри элемента с сердечком создать прозрачный абсолютно спозиционированный оверлей; при попадании на него курсора мыши 1) включать анимацию сердечка и 2) устанавливать скорость анимации и цвет сердечка в зависимости от расстояния до центра оверлея

Апдейт: СДЕЛАЛ ЧЁРТОВ ПРИМЕР! Полтора дня делал. Вот: https://jsfiddle.net/lucifer63/41y3qdu9/
Это эталонный пример говнокода, но я чо-то не смог проще сделать

Answer 2

[iBird Rose]

без js примерно так. но есть косяк анимации. слишком явный переход и видно дрыганье.

Comments

[Kovalsky]

Какой хитрый

[iBird Rose]

Kovalsky, лол. я твой ответ не читал) честно) самому первое пришло в голову именно это и решил затестить

[Kovalsky]

iBird Rose, а оверлей это не рабочая идея, потому что изначально дизайнер планировал, что это сердечко будет находиться в тексте, то есть во фразовом контексте, таким образом ни о каких оверлеях там речи идти не может. Но конечно идея хорошая.

Можешь глянуть мой пример выше, я добавил его в ответ. Это я ни в коем случае не хвастаюсь, получился откровенный говнокод, но пока что ни до чего лучше додуматься не могу.