O SVG (Scalable Vector Graphics) é um formato de imagem gravado em XML. Com o SVG, você pode codificar gráficos escaláveis bidimensionais. Em seguida, 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 aplicativos de terceiros para funcionar.
Como as animações ainda estão crescendo em popularidade, a maioria não as conhece. Este artigo destacará 20 animações SVG fantásticas que mostram o potencial desse formato.
1. Medical SVG Icons por gatinhos
Links Rápidos
- 1. Medical SVG Icons por gatinhos
- 2. Passe o mouse por SeanMcCaffery
- 3. Puxe para baixo para atualizar (Paper Plane) de Nikolay Talanov
- 4. Apenas siga em frente por Diaco M. Lotfollahi
- 5. Filtros SVG adicionados ao vídeo HTML5
- 6. Quebra-cabeça
- 7. Liner Gradient de Patrick Young
- 8. Vamos viajar por jjperezaguinaga
- 9. Relógio de Mohamad Mohebifar
- 10. Ícones animados de Luigi De Rosa
- 11. Todos os dispositivos em SVG de Chris Gannon
- 12. Cachoeira de Chris Gannon
- 13. Gerador de plantas por Blake Bowen
- 14. Ícone clicável de Hamish Williams
- 15. Novo bolo de Marco Barría
- 16. Paper Shredder de Chris Gannon
- 17. Low PolyLion por GRAYGHOST
- 18. Carregadora de ampulheta da Leela
- 19. Vaca responsiva de Sarah Drasner
- 20. Estudante de Domany
- Sua vez
Essa animação quente e suave é ótima para qualquer site relacionado à saúde. Enquanto você lista os diferentes segmentos, as imagens aparecerão sutilmente. O carro da ambulância ou o átomo serão construídos, os olhos se abrirão e o médico saltará. Esta animação mostra toda a diversão e dinamismo do SVG.
Ligação
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 o convida a clicar no link.
Ligação
3. Puxe para baixo para atualizar (Paper Plane) de Nikolay Talanov
Geralmente, as páginas são atualizadas quando você as puxa para baixo. Esta animação traz isso para um novo nível. Quando você puxa para baixo para soltá-lo, lança 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. Apenas siga em frente por Diaco M. Lotfollahi
Uma animação SVG que mostra o potencial do vetor de dimensionamento. O movimento suave e preciso do corpo humano é hipnotizante.
Ligação
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 e mostrar que a animação SVG pode ser uma boa adição a um vídeo pronto.
Ligação
6. Quebra-cabeça
Você pode criar incríveis quebra-cabeças interativos com animação SVG. Neste exemplo, podemos escolher uma das muitas imagens e ver como ela se desconstrói em muitas pequenas peças do quebra-cabeça. Você pode reconstruí-lo também!
Ligação
7. Liner Gradient de Patrick Young
Se você gosta de luzes de néon e fontes bonitas, poderá aproveitar esta animação. Este trabalho mostra como você não precisa de nenhuma linha móvel para uma animação brilhante, apenas uma ótima fonte e código de cores adequado com efeito gradiente.
Ligação
8. Vamos viajar por jjperezaguinaga
Dois aviões e um balão de ar quente girando em torno dos marcos populares do mundo. Essa animação é colorida, otimista e alucinante. Ele mostra tudo o que você pode fazer se tiver habilidade em SVG.
Ligação
9. Relógio de Mohamad Mohebifar
Uma animação SVG simples 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.
Ligação
10. Ícones animados de 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 de Chris Gannon
Uma animação única que aborda todos os dispositivos inteligentes que usamos da maneira mais criativa. A área de trabalho se transformará em um laptop, laptop em um tablet e depois em um smartphone.
Ligação
12. Cachoeira de Chris Gannon
Outra de Chris Gannon, é uma demonstração clara de um fundo de espuma em cascata. O movimento da água é puro e você pode ver pequenas gotas da água espirrando saindo das bordas da animação para fazer tudo parecer mais realista.
Ligação
13. Gerador de plantas por Blake Bowen
Agora este é outra coisa. Quando você clica no botão 'Criar', verá plantas subindo e crescendo. Mas cada vez que você clica, padrões diferentes se formam.
Ligação
14. Ícone clicável de Hamish Williams
Outro SVG interativo que aciona uma animação quando você clica nela. Este iniciará a animação "Enviar" quando você clicar nela.
Ligação
15. Novo bolo de Marco Barría
Animação interessante que mostra a confecção de um bolo camada por camada. É uma animação SVG impressionante, adequada para um cartão de aniversário.
16. Paper Shredder de Chris Gannon
Se você gosta de assistir a trituração de papel, desfrutará desta animação que mostra uma máquina de triturar papel por papel, sem limite de tempo, em uma sequência uniforme.
Ligação
17. Low PolyLion por GRAYGHOST
Esta é uma ilustração alucinante e uma animação que mostra a cabeça de um leão aparecendo e desaparecendo na forma de polígonos animados.
Ligação
18. Carregadora de ampulheta da 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.
Ligação
19. Vaca responsiva de Sarah Drasner
Esta é uma animação interativa engraçada que permite clicar em uma vaca e arrastá-la pela lua enquanto um astronauta perplexo a observa.
20. Estudante de Domany
Um aluno entusiasmado parece pronto para aprender! É uma ótima animação, onde as páginas dos livros estão girando perfeitamente. Não há piscada do aluno, mas ainda é uma animação perfeitamente organizada para concluir esta lista.
Ligação
Sua vez
Quais são as suas animações SVG favoritas não incluídas nesta lista? Compartilhe suas escolhas nos comentários abaixo!
