20 exemplos fantásticos de animação SVG

Scalable Vector Graphics (SVG) é um formato de imagem escrito em XML. Com o SVG, você pode codificar um gráfico escalável bidimensional. Então, você pode implementá-los e modificá-los em CSS e JavaScript.

O SVG permite três tipos de gráficos: formas vetoriais (linhas retas e curvas em todas as direções e formas), imagens e texto. Por causa de seus vários recursos, os web designers recorrem ao SVG para fazer animações complexas. Eles são fáceis de instalar, não perdem qualidade quando redimensionados e não exigem nenhum aplicativo de terceiros para funcionar.

Como as animações ainda estão crescendo em popularidade, a maioria não está familiarizada com elas. Este artigo irá destacar 20 fantásticas animações SVG que mostram o potencial deste formato.

1. Ícones SVG médicos por gatinhos

Esta animação quente e suave é ótima para qualquer site relacionado à saúde. Enquanto você lista os diferentes tópicos, as imagens aparecerão sutilmente. A ambulância ou o átomo construirá, o olho abrirá e o médico saltará para fora. Esta animação mostra toda a diversão e dinamismo do SVG.

Link

2. Passe o mouse por SeanMcCaffery

Animação universal que você pode colocar em qualquer site interativo. A aparência sutil das bordas quando você passa o mouse deixa você com uma sensação satisfatória e convida você a clicar no link.

Link

3. Puxe para baixo para atualizar (avião de papel) por Nikolay Talanov

Normalmente, as páginas serão atualizadas quando você as "puxar" para baixo. Esta animação traz isso para um novo nível. Quando você puxar para baixo para soltá-lo, você lançará um avião de papel no céu. Se você deseja que seus visitantes atualizem seu aplicativo com frequência, considere adicionar uma animação como esta.

4. Continue indo por Diaco M. Lotfollahi

Uma animação SVG que mostra o potencial do Scaling Vector. O movimento suave e preciso do corpo humano é hipnotizante.

Link

5. Filtros SVG adicionados ao vídeo HTML5

Paul Irish, da equipe do Google Chrome, analisou como o SVG pode modificar o conteúdo fora dos gráficos vetoriais. Ele combinou CSS e SVG para criar filtros visuais incríveis para mostrar que a animação SVG pode ser um ótimo complemento para um vídeo pronto.

Link

6. Quebra-cabeça

Você pode criar quebra-cabeças interativos incríveis com animação SVG. Neste exemplo, podemos escolher uma das muitas fotos e ver como ela se desconstrói em muitas pecinhas do quebra-cabeça. Você pode reconstruí-lo também!

Link

7. Gradiente Liner por Patrick Young

Se você gosta de luzes neon e fontes bonitas, vai gostar desta animação. Este trabalho mostra como você não precisa de nenhuma linha em movimento para uma animação brilhante, apenas uma ótima fonte e código de cores adequado com efeito gradiente.

Link

8. Vamos Viajar de jjperezaguinaga

Dois aviões e um balão de ar quente girando em torno de marcos populares do mundo. Esta animação é colorida, otimista e alucinante. Ele mostra tudo o que você pode fazer se for habilidoso em SVG.

Link

9. Relógio de Mohamad Mohebifar

Uma simples animação SVG de um relógio em movimento que mostra a hora atual. O movimento suave dos ponteiros e o design minimalista fazem maravilhas para esta animação.

Link

10. Ícones animados por Luigi De Rosa

Se você passar o mouse sobre esses ícones, acionará as animações, que são simples, mas eficazes. Você pode ver que não precisa fazer maravilhas para criar um ícone animado impressionante.

11. Todos os dispositivos em SVG por Chris Gannon

Uma animação de um take que percorre todos os dispositivos inteligentes que usamos da maneira mais criativa. O desktop se transformará em um laptop, laptop em um tablet e depois em um smartphone.

Link

12. Cachoeira por Chris Gannon

Outro por Chris Gannon, esta é uma demonstração elegante de um fundo de cachoeira espumante. O movimento da água é nítido, e você pode ver pequenas gotas de água saindo das bordas da animação para fazer tudo parecer mais realista.

Link

13. Gerador de plantas por Blake Bowen

Agora este é outra coisa. Ao clicar no botão 'Criar', você verá plantas crescendo e crescendo. Mas cada vez que você clicar, padrões diferentes se formarão.

Link

14. Ícone clicável por Hamish Williams

Outro SVG interativo que aciona uma animação quando você clica nele. Este iniciará a animação “Enviar” assim que você clicar nele.

Link

15. Novo Bolo de Marco Barría

Animação interessante que mostra a confecção de um bolo camada por camada. É uma impressionante animação SVG adequada para um cartão de aniversário.

16. Destruidor de Papel por Chris Gannon

Se você gosta de assistir a trituração de papel, apreciará esta animação que mostra uma máquina triturando papel por papel vezes ilimitadas em uma sequência perfeita.

Link

17. Low PolyLion por GREYGHOST

Esta é uma ilustração e animação alucinante que retrata a cabeça de um leão aparecendo e desaparecendo na forma de polígonos animados.

Link

18. Carregador de Ampulheta por Leela

Outra animação eficaz que usa apenas SVG. A cada 5 segundos, a ampulheta vira de cabeça para baixo e inicia um novo ciclo.

Link

19. Vaca Responsiva por Sarah Drasner

Esta é uma animação interativa engraçada que permite clicar em uma vaca e arrastá-la ao redor da lua enquanto um astronauta perplexo olha para ela.

20. Aluno por Domany

Um estudante entusiasmado parece pronto para aprender! É uma ótima animação onde as páginas do livro estão virando ordenadamente. Sem piscar do aluno, mas esta ainda é uma animação perfeitamente organizada para concluir esta lista.

Link

Sua vez

Quais são suas animações SVG favoritas não incluídas nesta lista? Compartilhe suas escolhas nos comentários abaixo!