Una piccola tecnica di animazione SVG popolare è il disegno del percorso. Se non riesci a immaginarlo, ecco una raccolta di un'infinità di esempi che ho creato. In sostanza, il tratto attorno alle forme SVG si disegna nel tempo.
Ne ho sentito parlare per la prima volta dall'articolo di Jake Archibald Disegno al tratto animato in SVG, che è una buona spiegazione come può esserci. Ma ovviamente ho tentato anche la mia spiegazione e ne parleremo in questo video.
Penso che sia più facile pensare di iniziare con CSS e come funzionano le proprietà del trattino quando vengono applicate a una forma SVG. Come possono allungarsi, e anche abbastanza a lungo da coprire (o non coprire) l'intera forma. Quindi compensarli quando sono così lunghi è come funziona il disegno.
Quindi, una volta capito questo, comprendi che JavaScript può aiutare a calcolare la lunghezza dei trattini e degli offset necessari e farlo nel modo giusto.