CSS snake эффект, как реализовать?

Question

[amigo567]

Вроде что-то получилось, но не понятно как сделать "хвост" / плавное появление и исчезновение кругов по мере движения

курсора, как здесь:


В данный момент:
https://play.vuejs.org/#eNrVVd9v0zAQ/leOwLROWrJmK2...

Answer 1

[ksnk]

Не так ? С vue я не особо знаком, так что чисто на JS.
Грубовато написано, но общий смысл, вроде должен быть понятен - запоминаем с каким-то периодом все "круги", по таймеру увеличиваем прозрачность "кругов", по мере переполнения - выкидываем лишние "круги". Самый верхний круг рисуем как и раньше - по движению мыши.
Сейчас всего 15, период 20

Comments

[amigo567]

ksnk , неплохо. Спасибо. Может знаете как ещё цвет довести до того, что в примере?
Круг сейчас как-будто с opacity: 1, можно ли применить как-то к radial-gradient filter: blur(60px)? То есть чем ближе к окружности, тем меньше opacity и в центре opacity: 1.

[ksnk]

amigo567, Сейчас чуть покорректней написано, но проблема с цветом в том, что "круги" располагаются рядом и их opacity накладываются друг на друга.
сейчас сделано так, что новый круг "тени" вносится в цикл только после того, как курсор отойдет на достаточное расстояние. Так что если мышь остановилась - будет тот цвет, который нужен, а пока елозит - светлее.