SWCore / Animações / SVG Draw (traço)

SVG Draw (traço) Animações

O traço de um desenho SVG se desenha sozinho conforme você rola.

O que é

Anima o stroke-dashoffset de um <path> SVG do zero até o traço completo, dando a impressão de estar sendo desenhado à mão.

Como funciona

O atributo vai direto no <path>, não no <svg> — o comprimento do traço é medido automaticamente via getTotalLength().

Exemplos

Uma curva se desenhando Ao vivo 
<svg viewBox="0 0 120 60">
  <path sw-ani="svg-draw"
        d="M4 30 Q 30 4 60 30 T 116 30"
        fill="none" stroke="var(--sw-pri)" stroke-width="3"/>
</svg>

<!-- o atributo vai NO <path>, nunca no <svg> -->
Espessura e cor Ao vivo 
<!-- fino -->
<path sw-ani="svg-draw" d="…" fill="none" stroke="var(--sw-pri)" stroke-width="1"/>

<!-- grosso e com ponta arredondada -->
<path sw-ani="svg-draw" d="…" fill="none" stroke="#f43f5e"
      stroke-width="8" stroke-linecap="round"/>

<!-- fill="none" é obrigatório: é o TRAÇO que anima, não o preenchimento -->
Vários traços no mesmo desenho Ao vivo 
<svg viewBox="0 0 200 100">
  <path sw-ani="svg-draw" d="M20 80 L 60 30"  fill="none" stroke="…" stroke-width="4"/>
  <path sw-ani="svg-draw" d="M60 30 L 100 70" fill="none" stroke="…" stroke-width="4"/>
</svg>

<!-- cada <path> anima o próprio traço, no seu tempo -->
Assinatura / rabisco Ao vivo 
<svg viewBox="0 0 240 80">
  <path sw-ani="svg-draw"
        d="M10 55 C 30 10, 50 10, 60 45 S 80 70, 95 40 S 120 5, 140 45"
        fill="none" stroke="var(--sw-pri)" stroke-width="3" stroke-linecap="round"/>
</svg>

<!-- exporte o traço do Figma/Illustrator como <path> e cole aqui -->

Atributos

Nenhum.

Variantes

(sem opções)
não tem configuração: o comprimento do traço é medido sozinho
stroke-width
a espessura é atributo do próprio SVG, não do componente
stroke
a cor também — aceita var(--sw-pri) e qualquer cor CSS

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

Limitações — o que ele não faz

  • Anima o contorno, não o preenchimento: o <path> precisa de fill="none" e um stroke visível.
  • Formas feitas com <rect>, <circle> ou texto não são cobertas — converta pra <path> no editor de vetor antes.
← AnteriorFrames (sprite no scroll) Próximo →Motion Path