Vinte animações SVG ao vivo com código para copiar: desenho de linha, loaders, transições de ícone, barras de gráfico crescendo e morph de path, além de CSS vs SMIL vs GSAP e SVG vs Lottie.
A animação SVG move ou redesenha formas vetoriais com CSS, SMIL ou JavaScript. Os keyframes do CSS cuidam de transforms, opacity e do truque de desenho de linha com stroke-dasharray e stroke-dashoffset. Tags SMIL como <animate> podem transformar paths e seguir trajetórias de movimento sem scripts. Bibliotecas como o GSAP adicionam timelines e controle por rolagem. O Lottie é indicado para animações do After Effects feitas por designers.
Qual técnica para qual efeito
Cada animação desta página roda ao vivo a partir do código ao lado, em um frame com scripts desativados, então o que você copia é exatamente o que funciona sem JavaScript. Todas também param para visitantes que pedem movimento reduzido no sistema. Um criador de desenho de linha no topo gera o truque do stroke para qualquer path que você colar.
Dê ao stroke um dash do tamanho do path com stroke-dasharray, empurre-o para fora da vista com um stroke-dashoffset igual e depois anime o offset até 0. O dash desliza para o lugar e a linha parece se desenhar sozinha. pathLength="1" permite usar 1 para os dois valores.
Não. O Chrome anunciou um plano para descontinuá-lo em 2015 e depois suspendeu esse plano. Elementos SMIL como animate, animateTransform e animateMotion funcionam em todos os principais navegadores atuais e fazem parte da especificação do SVG.
Em parte. A propriedade CSS d aceita valores path() e pode ser animada em navegadores Chromium e no Firefox, mas o Safari não a suportava no momento em que este texto foi escrito, então confira no caniuse. Os dois paths precisam ter o mesmo número e tipo de comandos. O animate do SMIL no atributo d tem suporte mais amplo.
Use SVG puro com CSS para ícones, loaders e ilustrações simples que você consegue descrever em código. Use Lottie quando um motion designer cria um personagem ou uma cena complexa no After Effects e você quer reproduzi-los com fidelidade. O Lottie precisa de uma biblioteca de player; o SVG puro não.
Envolva as animações CSS em uma media query prefers-reduced-motion ou desative-as dentro dela. O CSS não consegue pausar o SMIL, então mostre uma versão estática do gráfico nessa media query, ou chame pauseAnimations() no elemento svg a partir de um script.
Todas as vinte rodam sem JavaScript e incluem uma regra de movimento reduzido. Edite qualquer uma no próprio lugar.
O truque clássico do stroke com pathLength=1, para que os valores do dash não dependam do comprimento real.
Um path mais longo desenhado devagar com easing linear parece uma caneta se movendo.
Um círculo com um dash parcial gira; transform-box mantém o giro centralizado.
Valores escalonados de animation-delay transformam um único conjunto de keyframes em uma onda.
Escala e esmaecimento juntos para um radar ou indicador de ao vivo.
Cada barra escala no eixo Y a partir da base, com a própria duração.
As barras crescem uma vez ao carregar. Usar forwards mantém o estado final, e a regra de movimento reduzido simplesmente mostra o gráfico pronto.
A mesma ideia do dash em um círculo. Gire -90 graus para que comece no topo.
Passe o mouse ou dê foco no botão. Cada linha se move e gira com uma transition, sem precisar de keyframes.
Dois passos rápidos de escala e depois uma pausa, tudo em uma única lista de keyframes.
Funciona no Chromium e no Firefox. Onde d não é suportada, a forma continua um quadrado. Os dois paths usam os mesmos comandos na mesma ordem.
O SMIL altera o próprio atributo d, que tem suporte mais amplo do que a propriedade CSS d. A cópia estática aparece para movimento reduzido.
rotate=auto vira a forma para a direção do movimento.
Os valores de rotate recebem o ponto central como segundo e terceiro números.
O SMIL anima as cores das paradas do gradiente, algo que keyframes CSS em stop-color também conseguem fazer.
Um path com o dobro da largura da área visível desliza para a esquerda exatamente um período, então o loop não tem emenda.
Rotação a partir do topo do sino, disparada por hover ou foco do teclado.
Um stroke tracejado com offset animado, o visual de uma caixa de seleção em editores de imagem.
Traços curtos em uma linha curva se movem continuamente para sugerir direção.
O achatamento no impacto transmite o peso. transform-origin na base mantém a bola no chão enquanto ela se achata.
Três formas de animar SVG
Só o código, já que os frames das demos têm scripts desativados. O GSAP é gratuito sob a própria licença, que não é MIT, então leia os termos antes de publicar.
Estrela
Onda
Casa
Repetir
Seu sistema pede movimento reduzido, então o desenho aparece pronto. Clique em Repetir para reproduzi-lo uma vez.
Dados do path (atributo d)
Duração: {n}s
Espessura do traço: {n}
Easing
Cor
SVG e CSS
Copiar código
Comece grátis · Sem cartão de crédito