Популярна малка SVG анимационна техника е рисуването на пътеки. Ако не можете да си го представите, ето колекция от милиони примери, които съм създал. По същество ударът около SVG фигурите се изтегля с течение на времето.
За първи път чух за него от статията на Джейк Арчибалд „Анимирано изчертаване на линии“ в SVG, което е едно добро обяснение за това, доколкото може. Но разбира се, аз също се опитах да си обясня и разглеждаме това в това видео.
Мисля, че е най-лесно да се мисли за започване с CSS и как свойствата на тирето работят, както се прилагат към SVG форма. Как те могат да станат по-дълги и дори достатъчно дълги до степен да покрият (или да не покрият) цялата форма. След това компенсирането им, когато са толкова дълги, е начинът, по който работи рисунката.
След това, след като разберете това, разберете, че JavaScript може да ви помогне да изчислите дължината на необходимите тирета и отмествания и да го направите точно както трябва.