Populární technikou malé animace SVG je kreslení cest. Pokud si to nemůžete představit, zde je sbírka mnoha příkladů, které jsem vytvořil. V podstatě se tah kolem tvarů SVG postupem času kreslí sám.
Poprvé jsem o tom slyšel z článku Jakea Archibalda Animované perokresby v SVG, což je asi dobré vysvětlení, jak jen může být. Ale samozřejmě jsem se pokusil také o vlastní vysvětlení a v tomto videu si to projdeme.
Myslím, že je nejjednodušší myslet na začátek s CSS a na to, jak vlastnosti pomlčky fungují při použití na tvar SVG. Jak se mohou prodloužit a dokonce dostatečně dlouho, aby zakryly (nebo nezakryly) celý tvar. Jak je kresba funguje, pak je vyrovnejte, když jsou tak dlouhé.
Jakmile to pochopíte, pochopte, že JavaScript vám může pomoci vypočítat délku potřebných pomlček a posunů a udělat to správně.