Populaarne väike SVG animatsioonitehnik on raja joonistamine. Kui te ei saa seda pildile kujutada, on siin minu loodud zillioni näidete kogu. Põhimõtteliselt tõmbab SVG-vormide ümber olev tõmme ennast aja jooksul.
Esimest korda kuulsin sellest Jake Archibaldi artiklist Animeeritud joonisjoonistus SVG-s, mis on selle hea seletuse kohta nii palju kui võimalik. Kuid loomulikult proovisin ka oma selgitust ja läheme sellest sellest videost üle.
Ma arvan, et kõige lihtsam on mõelda CSS-ist alustamisele ja sellele, kuidas kriipsuomadused toimivad SVG-vormile rakendatuna. Kuidas nad võivad muutuda pikemaks ja isegi piisavalt pikaks, kuni katavad (või katavad) kogu kuju. Siis tasub joonistamine nii kaua, kui nad on nii pikad.
Kui olete sellest aru saanud, mõistke, et JavaScripti abil saate arvutada vajalike kriipsude ja nihete pikkuse ning tehke seda õigesti.