Популярной небольшой техникой анимации SVG является рисование контуров. Если вы не можете вообразить это, вот коллекция из миллиона примеров, которые я создал. По сути, обводка вокруг фигур SVG со временем прорисовывается.
Впервые я услышал об этом из статьи Джейка Арчибальда «Анимированные рисования линий в SVG», которая дает хорошее объяснение, которое может быть. Но, конечно, я попытался объяснить свое собственное мнение, и мы рассмотрим это в этом видео.
Я думаю, что проще всего подумать о том, чтобы начать с CSS и о том, как свойства тире работают применительно к фигуре SVG. Как они могут быть длиннее, и даже достаточно длинными, чтобы покрывать (или не покрывать) всю форму. Затем смещение их, когда они такие длинные, - вот как работает рисунок.
Затем, когда вы это поймете, поймите, что JavaScript может помочь вычислить длину необходимых штрихов и смещений и сделать это правильно.