Как осуществить такую анимацию?

Question

[valya0502]

Необходимо сделать анимацию (движущиеся соединенные точки) как на главном экране этих сайтов:
https://www.real.markets/
https://paragoncoin.com/en
https://alismedia.jp/
Подскажите пожалуйста, как это сделать.
Заранее благодарю за ответ)

Comments

[Kovalsky]

На домашке particles.js прям точная копия того, что у вас по первой ссылке.

Answer 1

[Антон]

Particle JS

Answer 2

[Finesse]

Через <canvas>. Программирование производится с помощью JavaScript. Схема примерно такая:

1. На то место, где должен быть эффект, помещается canvas, который занимает всю площадь места.
   
2. В памяти генерируется набор случайных точек со своим вектором скорости.
   
3. В каждом кадре анимации точки сдвигаются в соответствии в вектором скорости.
   
4. В каждом кадре анимации точки отрисовываются на canvas. Дополнительно проводятся линии между всеми парами точек, между которыми расстояние меньше определённого значения.
   

Есть готовая библиотека для создания таких анимаций.

Answer 3

[Артур Карапетян]

Видео