Populiari maža SVG animacijos technika yra kelio piešimas. Jei negalite jo pavaizduoti, pateikite milijardą mano sukurtų pavyzdžių. Iš esmės potėpis aplink SVG figūras traukiasi laikui bėgant.
Pirmą kartą apie tai išgirdau iš Jake'o Archibaldo straipsnio „Animated line drawing of SVG“, kuris yra geras jo paaiškinimas, koks tik gali būti. Bet, žinoma, bandžiau paaiškinti ir aš, ir mes tai apžvelgiame šiame vaizdo įraše.
Manau, kad lengviausia galvoti apie pradedant CSS ir kaip brūkšnio savybės veikia kaip pritaikytos SVG formai. Kaip jie gali pailgėti ir net pakankamai ilgai, kad padengtų (arba neuždengtų) visą figūrą. Tada piešinys veikia, kai jie yra tokie ilgi.
Tada, kai tai suprasite, supraskite, kad „JavaScript“ gali padėti apskaičiuoti reikalingų brūkšnių ir poslinkių ilgį ir tai padaryti teisingai.