Animação de desenho de logo SVG: como funciona a revelação do traço

Como funciona o efeito de desenho de linha em SVG?

É um truque com tracejados. stroke-dasharray define "o padrão de traços e espaços usado para pintar o contorno da forma." stroke-dashoffset define "um deslocamento na renderização do dash array associado." Os dois podem ser animados e os dois funcionam como propriedades CSS.

1. Faça um traço exatamente do comprimento do path, seguido de um espaço do mesmo comprimento.
2. Desloque o padrão pelo comprimento total, para que o espaço cubra o path e nada apareça.
3. Anime o deslocamento de volta a 0. O traço desliza ao longo do path e a linha parece se desenhar sozinha.

O clássico texto explicativo do CSS-Tricks coloca o requisito em primeiro lugar: "A forma precisa ter um traço." Tudo o que vem abaixo decorre disso.

Qual é o código mais simples para uma animação de desenho de logo SVG?

Defina pathLength="1" em cada path. O MDN explica que o navegador então ajusta as distâncias para que o stroke-dasharray "considere o início do path como 0 e o ponto final como o valor definido no atributo pathLength." Todo path passa a ter 1 unidade de comprimento, então uma única regra CSS serve para todos.

<svg viewBox="0 0 200 60" role="img" aria-label="Offscript">
  <path class="draw" pathLength="1" d="M10 45 C40 5, 70 5, 100 40 S160 75, 190 15" />
</svg>

.draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s ease-in-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dashoffset: 0; }
}

O forwards importa: animation-fill-mode: forwards mantém "os valores calculados definidos pelo último keyframe", então o logo continua desenhado quando a animação termina. A regra de movimento reduzido mostra o logo pronto de imediato.

Se você prefere comprimentos reais, meça-os em JavaScript. getTotalLength() retorna "o comprimento total do path em unidades do usuário":

document.querySelectorAll(".draw").forEach((path, i) => {
  const len = path.getTotalLength();
  path.style.strokeDasharray = len;
  path.animate(
    [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
    { duration: 1200, delay: i * 150, easing: "ease-in-out", fill: "forwards" }
  );
});

Você deve usar CSS, SMIL ou JavaScript para o efeito de desenho?

SMIL é o elemento <animate>, que "oferece uma forma de animar um atributo de um elemento ao longo do tempo." O MDN o marca como Baseline amplamente disponível. Use attributeName="stroke-dashoffset", from="1", to="0" e fill="freeze" para manter o estado final.

Onde o SVG fica também decide o método. Usado como <img>, segundo o MDN, alguns navegadores desativam o JavaScript dentro dele e bloqueiam folhas de estilo externas, então a animação precisa ser escrita dentro do arquivo SVG. Um SVG inline no seu HTML pode usar os três. Para começar o desenho quando o logo aparece na rolagem, a Intersection Observer API é a ferramenta padrão; a Web Animations API (element.animate()) permite reproduzir, pausar e reiniciar por script.

Como animar o desenho de um logo preenchido?

A maioria dos logos é feita de formas preenchidas, não de linhas, então o truque do tracejado não tem o que desenhar. Três formas de contornar isso:

1. Contorno, depois preenchimento. Dê às formas preenchidas um traço temporário, desenhe esse contorno e depois faça o preenchimento aparecer. Rápido e convincente para símbolos marcantes.
2. Revelação com máscara. Desenhe um path simples de linha central que percorre o logo, com um traço largo o suficiente para cobri-lo, dentro de uma <mask>. Em uma máscara de luminância, o exemplo do MDN observa que "tudo o que estiver sob um pixel branco vai ficar visível", então, conforme o traço branco é desenhado, o logo preenchido real aparece por baixo. A sua arte nunca é alterada.
3. Cortina. Um <clipPath> "restringe a região onde a pintura pode ser aplicada." Anime um retângulo dentro dele para revelar o logo a partir de um lado. Não tem visual de desenho à mão, mas funciona com qualquer arte.

<svg viewBox="0 0 200 60" role="img" aria-label="Offscript">
  <mask id="reveal">
    <path class="draw" pathLength="1" stroke="white" stroke-width="14"
          d="M10 45 C40 5, 70 5, 100 40 S160 75, 190 15" />
  </mask>
  <g mask="url(#reveal)">
    <!-- your filled logo paths, unchanged -->
  </g>
</svg>

O mesmo CSS .draw de cima anima o path da máscara. Desenhe a linha central na ordem em que uma caneta se moveria, porque é nessa ordem que o logo aparece.

Como exportar um logo do Figma ou do Illustrator para uma animação de desenho?

Confira o que a exportação realmente contém. A ajuda do Figma lista "o Figma exporta traços como preenchimentos" entre as observações sobre exportação SVG, e diz que "o SVG só suporta traço centralizado", com uma configuração Simplify stroke para traços internos e externos. A opção Outline text "converte todas as camadas de texto em glifos", que são formas preenchidas. Qualquer um desses casos pode deixar você sem traço para animar.

• Abra o SVG em um editor de texto. Um path desenhável tem stroke definido e fill="none". Um path só com fill é uma forma; use o método da máscara.
• Desenhe as linhas como traços centralizados para tudo o que deve ser desenhado, como uma assinatura ou um símbolo monoline.
• Nomeie as camadas. A opção Include "id" attribute do Figma adiciona ids com base nos nomes das camadas, que o seu CSS ou script pode usar como alvo.
• Illustrator: a mesma verificação vale para a exportação SVG dele. Se os paths saírem como contornos preenchidos, refaça as partes desenhadas como paths abertos com traço antes de exportar.

Como desenhar um logo com vários paths em sequência?

Atrase cada path para que o desenho passe de um traço para o próximo, como uma mão faria.

• Mesma duração por path: com pathLength="1", todo path leva o mesmo tempo, seja qual for o comprimento. É simples, mas um tique curto e um floreio longo terminam juntos, então o curto parece lento.
• Velocidade de caneta constante: meça cada path com getTotalLength() e faça a duração proporcional ao comprimento, começando cada um quando o anterior termina.
• Sobreponha um pouco: começar o próximo traço um pouco antes de o último terminar parece mais fluido do que uma fila rígida.
• Termine com o preenchimento: faça os preenchimentos e as cores aparecerem depois do último traço, para que o logo termine exatamente como foi desenhado.

Uma revelação que toca uma vez em uns dois segundos fica bem abaixo do limite de cinco segundos da WCAG 2.2.2 para movimento automático. Um desenho que fica em loop para sempre não fica, então dê ao loop uma forma de parar.

Quando usar Lottie ou Rive em vez de SVG e CSS?

Quando a revelação precisa rodar fora do navegador ou fazer mais do que desenhar.

• Lottie: a tabela de recursos suportados do Lottie lista Trim Path (individually) como suportado no Android, iOS e Web. Trim Path aplicado simultaneamente não é suportado pelo renderer Core Animation do iOS.
• Rive: o Trim Path permite "desenhar só uma parte do traço em uma forma vetorial", com Start, End e Offset, e um modo Sequential que desenha os paths um após o outro. Um arquivo Rive pode então seguir para uma state machine: desenhar, ficar em idle, reagir ao hover.

Fique com SVG e CSS quando o logo só aparece na web, o movimento é um único desenho e você quer zero dependências. Mude quando a mesma animação precisa ir para um app iOS ou Android, ou quando precisa de estados. Comparações: Lottie vs animação com SVG e CSS e SVG para Rive.

Dá para ter uma revelação de logo escrita à mão sem programar?

O Motion Studio do Charmotion separa um logotipo chapado em letras, para que elas possam ser escritas por uma caneta, subir de uma linha de base ou cair e quicar, como na demo do Offscript. As letras vêm do seu arquivo e nunca são trocadas por uma fonte. Uma animação de abertura vem como um .riv com código para web, SwiftUI, Android, Flutter e React Native, além de MP4 e vídeo transparente. Os conceitos são grátis; criar um começa no Starter (US$ 9/mês em novembro de 2026).

Como fazer um logo SVG se desenhar sozinho

1. Confira os paths. Abra o SVG e confirme que as partes a desenhar são paths com traço e com fill definido como none.
2. Normalize o comprimento. Adicione pathLength="1" a cada path, ou meça cada um com getTotalLength().
3. Esconda a linha. Defina stroke-dasharray e stroke-dashoffset com o comprimento do path para que o traço comece oculto.
4. Anime o deslocamento. Anime o stroke-dashoffset até 0 com fill mode forwards, escalonando os paths na ordem do desenho.
5. Trate a arte preenchida. Para logos preenchidos, coloque um traço branco grosso de linha central em uma máscara sobre as formas reais e anime esse traço.
6. Respeite o movimento reduzido. Com prefers-reduced-motion, pule a animação e mostre o logo pronto.

Perguntas frequentes

Por que a minha animação de desenho SVG não faz nada no meu logo?

Geralmente o logo não tem traços. Logos exportados, texto convertido em contorno e muitas exportações do Figma são formas preenchidas, então animar o stroke-dashoffset não muda nada visível. Abra o SVG e procure stroke nos paths. Se só houver fill, use o método da máscara ou adicione um traço de contorno temporário.

Preciso de JavaScript para uma animação de linha em SVG?

Não. Definir pathLength="1" em cada path permite que o CSS puro use stroke-dasharray: 1 e anime o stroke-dashoffset de 1 a 0. O JavaScript ajuda quando você quer uma velocidade de desenho constante entre paths de comprimentos diferentes, ou para iniciar a animação na rolagem ou no clique.

A animação de desenho funciona se o SVG for usado em uma tag img?

Só se a animação estiver dentro do arquivo SVG. O MDN observa que os navegadores podem desativar o JavaScript e bloquear folhas de estilo externas em SVG usado como imagem, então coloque o CSS em um elemento style dentro do SVG, ou use SMIL, e teste nos navegadores que você suporta.

Fontes

• stroke-dasharray, MDN Web Docs
• stroke-dashoffset, MDN Web Docs
• SVGGeometryElement: getTotalLength() method, MDN Web Docs
• pathLength, MDN Web Docs
• animation-fill-mode, MDN Web Docs
• <animate>, MDN Web Docs
• SVG as an image, MDN Web Docs
• <mask>, MDN Web Docs
• <clipPath>, MDN Web Docs
• Web Animations API, MDN Web Docs
• Intersection Observer API, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• How SVG line animation works, CSS-Tricks
• Export formats and settings for static designs, Figma Learn
• Lottie supported features, Airbnb on GitHub
• Trim Path, Rive docs