En populær lille SVG-animationsteknik er stegtegning. Hvis du ikke kan forestille dig det, er her en samling af zillion eksempler, jeg har oprettet. I det væsentlige trækker slagtilfælde omkring SVG-former sig over tid.
Jeg hørte først om det fra Jake Archibalds artikel Animeret stregtegning i SVG, som handler om en god forklaring af det, som det kan være. Men selvfølgelig forsøgte jeg også min egen forklaring, og vi går over det i denne video.
Jeg synes det er nemmest at tænke på at starte med CSS, og hvordan bindestregegenskaberne fungerer som anvendt på en SVG-form. Hvordan de kan blive længere og endda længe nok til at dække (eller ikke dække) hele formen. Derefter modregnes dem, når de er så lange, hvordan tegningen fungerer.
Når du først har forstået det, skal du forstå, at JavaScript kan hjælpe med at beregne længden af de nødvendige bindestreger og forskydninger og gøre det helt rigtigt.