Jak został stworzony efekt animacji z tej strony internetowej?

Question

http://kuvi.pl/logowanie?redirect=http%3A%2F%2Fkuvi.pl%2Fkursy-do-nauki%2F27%2Fpraktyczny-kurs-jquery-wprowadzenie%2F405%2Fzapowiedz-dalszej-czesci-kursu-i-strona-z-ajaxem

Na podanej wyżej stronie został zastosowany bardzo ciekawie wyglądający efekt animowanych kresek w miejscu tła, w którym znajduje się kursor. Podobne efekty widziałem już na innych stronach, i za każdym razem bardzo mnie intrygowały.

Proszę o naprowadzenie mnie na to na jakiej zasadzie działa, najlepiej wraz z tym, że pojawia się tylko w okolicach kursora.
Jeśli istnieje do tego tutorial, to będę bardzo wdzięczny za podlinkowanie.

Answer 1

Ten efekt jest już na tylu stronach (głównie darmowych szablonach), że aż się rzygać chce.
Jest to canvas (element HTML5 do rysowania grafiki za pomocą JavaScript), tutaj JS przechwytuje pozycję kursora i wg. niego rysuje "siatkę".

Jeżeli chcesz się temu dokładnie samemu przyjrzeć: http://tympanus.net/codrops/2014/09/23/animated-background-headers/

Answer 2

Z mojej analizy wynika, że te kropeczki są wygenerowane na całej stronie i połączone ze sobą. Potem te kropeczki poruszają się w losowe miejsca i generując "nowe" linie, a sama animacja jest wyświetlona np w promieniu 200 pixeli od myszki. Będąc sprytnym, możesz podejrzeć kod tej strony bo jest to animacja w canvasie

Answer 3

Particles.js.