Как работает анимация в хедере на сайте JetBrains?

Question

[Евгений]

Здравствуйте!
Есть желание научиться делать нечто похожее на это (Посмотреть как работает можно здесь):

Куда копать? Возможно уже есть готовые решения/плагины где можно посмотреть как это работает?
Заранее спасибо!

Comments

[RAX7]

https://codepen.io/siokoden/pen/gvpaMg
https://codepen.io/dr3pper/pen/KZyZeg

[Евгений]

RAX7, Спасибо!

Answer 1

[Rustam Azizov]

Вроде такие штуки называются каплевидными объектами или метаболами (metaball). У них есть строгое математическое описание. В целом это самая сложная часть в этой задаче. А в остальном — это просто отрисовка на канвасе в пару-тройку слоёв. По ощущениям каждый «шарик» привязан к какой-то точке, от которой он не может отойти больше чем на отведённое ему расстояние. Ну и вдобавок к этому, он «убегает» от курсора. Вот и весь эффект.

Вот почитать и пример реализации:
https://ru.wikipedia.org/wiki/Metaball
paperjs.org/examples/meta-balls

Comments

[Евгений]

Спасибо за наводку, буду читать.

[Rustam Azizov]

nimfai, пожалуйста. Если помогло, то можете отметить как решение.

Answer 2

[katsi]

https://codepen.io/team/Atcom/pen/dWwGKa - вот аналогичный пример, но чтобы разобраться придется попотеть

Answer 3

[jamtuson]

https://css-tricks.com/gooey-effect/
Может быть вот это поможет?

Comments

[Евгений]

Спасибо!