Uma pequena técnica popular de animação SVG é o desenho de caminhos. Se você não consegue imaginar, aqui está uma coleção de um zilhão de exemplos que criei. Essencialmente, o traçado em torno das formas SVG se desenha com o tempo.
Ouvi falar dele pela primeira vez no artigo de Jake Archibald Desenho de linha animado em SVG, que é uma boa explicação possível. Mas é claro, eu tentei minha própria explicação também e vamos examinar isso neste vídeo.
Acho que é mais fácil pensar em começar com CSS e como as propriedades do traço funcionam quando aplicadas a uma forma SVG. Como eles podem ficar mais longos, e até mesmo longos o suficiente a ponto de cobrir (ou não cobrir) toda a forma. Então, compensando-os quando eles são tão longos é como o desenho funciona.
Depois de entender isso, entenda que o JavaScript pode ajudar a calcular o comprimento dos traços e deslocamentos necessários e fazer isso da maneira certa.