O tehnică populară de animație SVG este desenarea traseului. Dacă nu vă puteți imagina, iată o colecție de câteva miliarde de exemple pe care le-am creat. În esență, cursa din jurul formelor SVG se atrage în timp.
Am auzit pentru prima oară de el din articolul lui Jake Archibald Desen animat în linie în SVG, care este o explicație bună a acestuia, cât poate fi. Dar, bineînțeles, am încercat și eu propria mea explicație și trecem în revistă în acest videoclip.
Cred că este cel mai ușor să te gândești să începi cu CSS și cum funcționează proprietățile liniuței aplicate unei forme SVG. Cum pot să devină mai lungi și chiar suficient de lungi până să acopere (sau să nu acopere) întreaga formă. Apoi compensarea lor atunci când sunt atât de lungi este modul în care funcționează desenul.
Apoi, odată ce ați înțeles acest lucru, înțelegeți că JavaScript vă poate ajuta să calculați lungimea liniuțelor și decalajelor necesare și faceți-o corect.