Populárnou technikou animácie SVG je kreslenie ciest. Ak si to neviete predstaviť, tu je zbierka niekoľkých príkladov, ktoré som vytvoril. Úder okolo tvarov SVG sa v podstate sám nakreslí.
Prvýkrát som o tom počul z článku Jakea Archibalda Animované kreslenie čiar v SVG, ktorý je asi dobrým vysvetlením, ako môže byť. Ale samozrejme som sa pokúsil aj o svoje vlastné vysvetlenie a týmto videom si prechádzame.
Myslím, že je najjednoduchšie premýšľať o začiatku s CSS a o tom, ako fungujú vlastnosti pomlčky, keď sa použijú na tvar SVG. Ako sa môžu predĺžiť a dokonca natoľko dlho, aby zakryli (alebo nezakryli) celý tvar. Potom ich vyrovnajte, keď sú také dlhé, ako funguje kresba.
Potom, keď to pochopíte, pochopte, že JavaScript vám môže pomôcť vypočítať dĺžku potrebných pomlčiek a posunov a urobiť to správne.