En populär liten SVG-animationsteknik är banritning. Om du inte kan föreställa dig det, här är en samling av zillionsexempel jag har skapat. I huvudsak drar stroke runt SVG-former sig över tiden.
Jag hörde det först från Jake Archibalds artikel Animerad linjeteckning i SVG, som handlar om en bra förklaring av den så som den kan finnas. Men naturligtvis försökte jag också min egen förklaring och vi går igenom det i den här videon.
Jag tycker att det är lättast att tänka på att börja med CSS och hur bindestreckegenskaperna fungerar som tillämpade på en SVG-form. Hur de kan bli längre och till och med tillräckligt långa tills de täcker (eller inte täcker) hela formen. För att kompensera dem när de är så långa är hur ritningen fungerar.
När du förstår det, förstå att JavaScript kan hjälpa till att beräkna längden på de bindestreck och förskjutningar som behövs och göra det precis rätt.