Técnica da Aula 21 Ainda não homologado
Duas técnicas para desenhos vetoriais (SVG): fazer uma linha se desenhar sozinha conforme a rolagem avança, e fazer um objeto percorrer uma curva inteira, virando na direção certa em cada ponto do caminho.
Diferente dos outros 11 componentes: esta técnica nasceu na Aula 21 e ainda não foi incorporada aos dois arquivos que você instala no site. O exemplo abaixo é real e funciona, mas usar em outro site hoje exige copiar também a lógica de animação, não só o atributo — assim que for aprovada para a biblioteca oficial, este aviso sai daqui.
Role devagar: a linha se desenha sozinha, ponta a ponta, acompanhando exatamente sua rolagem — e desfaz se você voltar.
<svg viewBox="0 0 800 360">
<path data-sw="svg-draw" data-sw-scrub d="M70 260 C150 40 ... 740 105"/>
</svg>O d é o desenho do caminho em si — geralmente exportado direto de um programa de vetor (Illustrator, Figma, Inkscape). Você não escreve essas coordenadas à mão.
O losango azul percorre a estrada pontilhada e vira sozinho para acompanhar a direção da curva em cada instante — como um carrinho numa pista.
<svg data-sw="motion-path" data-sw-scrub>
<path data-sw-path d="M70 230 C180 20 ... 735 175"/>
<g data-sw-object>Seu objeto</g>
</svg>Mapa de entrega, linha do tempo de um processo, assinatura sendo desenhada, ou linhas que conectam etapas de uma história em um infográfico.