SVG Draw (traço) Animações

O que é

Pega uma linha de um desenho SVG (uma curva, um "check", uma assinatura, um círculo) e faz ela aparecer sendo traçada, do começo ao fim. Serve para sublinhar um título, mostrar um "pedido confirmado", desenhar a rota entre etapas ou dar vida a uma ilustração de linha.

O atributo vai na própria linha (<path>, <circle>, <polyline>…), não no <svg>. O SW Core mede sozinho o comprimento da linha, esconde e vai revelando. Por padrão ele desenha em meio segundo quando a linha chega a 85% da altura da tela, e apaga de novo se você rolar de volta para cima. Com a palavra scrub o desenho fica preso à rolagem: avança quando você desce, volta quando você sobe.

Quando usar

• Sublinhado ou rabisco em título de página de vendas: uma curva embaixo da palavra-chave.
• Confirmação (pedido feito, cadastro concluído): um "check" que se desenha.
• Rota, linha do tempo ou passo a passo: a linha ligando as etapas vai sendo traçada conforme a pessoa desce — use scrub.
• Ilustração ou assinatura exportada do Figma/Illustrator como linha (sem preenchimento).

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação. O swcore.motion.min.js já traz o GSAP dentro e tem que vir antes do swcore.min.js.

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- no fim do <body>: o motion ANTES do swcore -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Coloque sw-ani="svg-draw" na linha do desenho. Ela precisa de fill="none" e de um stroke (a cor do traço). Role a página até aqui e veja: ele se desenha ao aparecer.

   <svg viewBox="0 0 120 40" width="240" height="80" class="t-pri">
     <path sw-ani="svg-draw" d="M4 30 Q 30 4 60 22 T 116 12"
           fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
   </svg>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<h2>Seu site
  <span class="rel iflx f-cl alc">pronto
    <svg viewBox="0 0 120 16" width="140" height="18" class="t-pri">
      <path sw-ani="svg-draw" d="M3 11 C 30 3, 70 3, 117 9"
            fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
    </svg>
  </span>
  em 7 dias</h2>

<div class="flx f-cl alc gap-3 t-ct">
  <svg viewBox="0 0 60 60" width="96" height="96" class="t-suc">
    <circle sw-ani="svg-draw" cx="30" cy="30" r="26" fill="none" stroke="currentColor" stroke-width="3"/>
    <polyline sw-ani="svg-draw" points="18 31 26 39 43 22" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <strong class="t-g">Pedido confirmado!</strong>
  <span class="t-mut">Enviamos os detalhes para o seu e-mail.</span>
</div>

<svg viewBox="0 0 300 60" class="w-fl t-pri" height="70">
  <path sw-ani="svg-draw scrub" d="M20 30 C 70 0, 110 60, 150 30 S 230 0, 280 30"
        fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
</svg>
<div class="flx j-sb w-fl">
  <span>1. Briefing</span><span>2. Layout</span><span>3. No ar</span>
</div>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, carregados antes do swcore.min.js.
• Um SVG com linha de verdade: fill="none" e um stroke visível.

Cuidados — erros comuns

• Colocar sw-ani="svg-draw" no <svg> não faz nada (aparece um aviso no console). O atributo vai em cada linha que você quer desenhar.
• Desenho com preenchimento (fill colorido) não "se desenha": o preenchimento aparece inteiro de cara. Deixe fill="none".
• Linha tracejada (stroke-dasharray) perde o tracejado: o efeito usa essa mesma propriedade para esconder e revelar.
• Texto (<text>) não é linha. Para "escrever" uma palavra, converta o texto em contorno (path) no editor de vetor.
• Ícone exportado de biblioteca costuma vir com preenchimento, não com linha — confira se o SVG é "outline/stroke".
• Quer só um traço simples sem GSAP? Existe o mini-componente sw-draw, em CSS puro — veja Mini-componentes animados.

O que ele não faz

• A velocidade do desenho automático não é configurável (fica em meio segundo). Para controlar o ritmo, use scrub e deixe a rolagem mandar.
• O ponto de partida é fixo (quando a linha chega a 85% da altura da tela).
• Quem ativou "reduzir movimento" no sistema vê o traço já pronto, sem animação (a menos que você use data-sw-force).