Mais de 20 pacotes SVG animados legais

Publicados: 2015-11-16

SVG (ou Scalable Vector Graphics) é um formato de arquivo baseado em XML que contém vetores de duas dimensões e permite que os desenvolvedores criem gráficos incríveis e aplicativos gráficos dinâmicos e animados.

Índice ocultar
SVG POP Watch – Um mecanismo de exibição SVG animado responsivo
Pacote de ilustrações SVG animadas
Estilos de texto 3D animados – SVG
Ícones de clima SVG animados
Pacote de 6 ícones SEO SVG
StarshineJS – Efeito HTML de estrelas cintilantes animadas em SVG
Ícones animados do navegador SVG
Enliven' em Premium Add-on: Ícones promocionais da Web
Trigons – Criar e Animar Imagens SVG Abstratas
Ciclo - Kit Carregadores SVG
Pré-carregador HTML5 circular
Animação de músicos responsivos
Megapacote de ícones SVG animados
SVG animado do carregador dobrável
Flatimation SVG – Um conjunto de ícones SVG animados
Apresentação de slides de fotos de câmera SVG retrô
16 ícones de SEO animados
Menu Gooey: Plugin jQuery
40 ícones de mídia social SVG animados
Globo SVG animado com marcadores e logotipos
Reprodutor de áudio Gear HTML5
Gráfico de pizza 3D com JavaScript
Exemplos de ótimos sites que usam o poder do SVG
Cavalier: Conquistador de Excelência
Alfinete
Poignee de main virile
Alfinete
iFly50
The ARK: Star Citizen Starmap
Mantenha os terremotos estranhos
30u
Grupo QED
Melanie Daveid
WWF França – Hora do Planeta Paris
Nerisson
Uma empresa de design
MIDORI AOYAMA

SVG é um formato de imagem poderoso que pode ser manipulado com código, seja em um editor de texto ou com CSS/JS e é cada vez mais utilizado em web design.

Uma das maiores vantagens do SVG é que ele pode parecer nítido em todas as resoluções de tela. Ele pode conter tamanhos de arquivo muito pequenos e pode ser facilmente editado e modificado. As imagens SVG oferecem muito mais liberdade no que diz respeito ao tamanho das imagens usadas, bem como à maneira como elas interagem com o design final.

Esse formato de imagem vetorial baseado em XML facilita as coisas para desenvolvedores e web designers, então decidimos reunir aqui 22 pacotes SVG animados legais para inspirar você. Esses pacotes SVG premium atendem a diferentes propósitos, desde adicionar ícones e textos animados a sites até adicionar relógios, gráficos animados e muito mais.

Adicione esses pacotes SVG animados à sua coleção de web design e esteja pronto para o seu próximo projeto de site!

PS Também adicionamos alguns exemplos de como usar SVGs em web designs , abaixo.

SVG POP Watch – Um mecanismo de exibição SVG animado responsivo

Alfinete

O SVG POP Watch é perfeito para o seu projeto ou para a equipe do seu site. Você pode facilmente alterar sua aparência, ele possui um mecanismo de relógio SVG animado pronto para retina e responsivo. Você também pode adicionar facilmente seu próprio design. Este relógio SVG vem com muitos recursos excelentes, então não deixe de conferir!

Pacote de ilustrações SVG animadas

Pacote de ilustrações SVG animadas Alfinete

Este é um pacote de ilustração SVG muito legal e animado. Eles foram criados usando a biblioteca JavaScript Snap.SVG e ficariam ótimos em seus projetos.

Estilos de texto 3D animados – SVG

Estilos de texto 3D animados - Visualização SVG - CodeCanyon Alfinete

Este conjunto inclui 10 estilos únicos de textos animados em 3D. Eles usam texto HTML, o que significa que o Google o lê como qualquer outro texto HTML. Os estilos que este pacote contém variam de realista, plano e isométrico.

Ícones de clima SVG animados

Ícones de clima SVG animados Alfinete

Esses ícones animados de clima plano foram lindamente projetados. Cada um tem sua própria animação única e, ao usá-los, você definitivamente tornará seus projetos de web design mais criativos e atraentes.

Pacote de 6 ícones SEO SVG

Pacotes SVG animados de ícones SVG Alfinete

Este pacote contém 6 ícones animados SEO SVG. Você pode usá-los e integrá-los em seus projetos de web design para tornar seu site interativo.

StarshineJS – Efeito HTML de estrelas cintilantes animadas em SVG

Pacotes SVG animados StarshineJS Alfinete

Com o efeito HTML animado, você pode adicionar luzes brilhantes, sensuais ou de desenho animado aos seus elementos HTML. Você pode facilmente ajustar seus posicionamentos, tamanho, cor e muito mais.

Ícones animados do navegador SVG

Ícones SVG animados Alfinete

Esses ícones SVG animados são exatamente o que seu site precisa. Eles são a maneira perfeita de informar a seus clientes que seu aplicativo, tema ou jogo funciona perfeitamente em todos os principais navegadores.

Enliven' em Premium Add-on: Ícones promocionais da Web

Ícones de pacotes SVG animados Alfinete

Este pacote contém 50 ícones promocionais da web. Este é um add-on para Enliven'em. Cada ícone vem com 5 variações de fundo, o que significa que você terá 250 arquivos SVG no total.

Trigons – Criar e Animar Imagens SVG Abstratas

Pacotes SVG animados de Trigons Alfinete

Este é um script JS muito flexível que o ajudará a criar uma imagem SVG moderna e elegante com animações opcionais. Este conjunto contém 30 efeitos de animação integrados que você pode usar para criar o projeto de web design perfeito.

Ciclo - Kit Carregadores SVG

Ciclo - Kit Carregadores SVG Alfinete
Com este conjunto, seus pré-carregadores ficarão ótimos! Aqui estão 33 efeitos de animação de carregamento feitos apenas em SVG.

Pré-carregador HTML5 circular

Pré-carregador HTML5 circular Alfinete

Este é um pré-carregador HTML5 circular que fará a transição entre uma experiência normal do usuário e uma viagem tranquila ao conteúdo do seu site.

Animação de músicos responsivos

Pacotes SVG animados de animação de músicos responsivos Alfinete

Este pacote contém vários músicos SVG animados e os arquivos vetoriais originais. Você também tem um pacote de demonstração, um pacote de músicos. Este pacote está muito bem documentado.

Megapacote de ícones SVG animados

Alfinete

O Mega Pack de ícones SVG animados dará vida à sua arte vetorial. Tudo o que você precisa fazer é salvar sua arte, adicionar uma linha de código ao seu HTML e pronto!

SVG animado do carregador dobrável

SVG animado do carregador dobrável Alfinete

A animação SVG do Folding Loader é perfeita para sua página de pré-carregador. Use-o com confiança!

Flatimation SVG – Um conjunto de ícones SVG animados

Pacotes SVG Animados Flatimation Alfinete

O conjunto de ícones animados Flatimations SVG tornará seu site mais divertido e criativo. Esses ícones atraentes ficarão ótimos em qualquer dispositivo e navegador.

Apresentação de slides de fotos de câmera SVG retrô

Pacotes SVG animados retrô Alfinete

Este Slideshow de fotos Retro SVG Camera tem sua inspiração no design plano. Parece retrô, mas contemporâneo e é uma ótima maneira de animar e exibir imagens.

16 ícones de SEO animados

Ícones de pacotes SVG animados Alfinete

Que tal ter e usar esses 16 ícones animados de SEO que darão vida ao seu site. Eles são gráficos vetoriais totalmente escaláveis ​​e ficarão ótimos em qualquer dispositivo e navegador.

Menu Gooey: Plugin jQuery

Plugin jQuery Menu Gooey Alfinete

Este plugin irá ajudá-lo a criar um menu pegajoso com círculos como itens. Ele usa filtros SVG, contém 6 estilos de menu, vem com muitas opções personalizáveis ​​e muito mais.

40 ícones de mídia social SVG animados

Ícones de mídia social de pacotes SVG animados Alfinete

Aqui está um conjunto muito legal de ícones SVG animados que são a maneira perfeita de direcionar os visitantes do seu site para suas páginas de mídia social.

Globo SVG animado com marcadores e logotipos

Logotipos SVG animados Alfinete

Este é um globo SVG animado muito legal com marcadores e logotipos que funciona bem em dispositivos móveis e desktop. É a maneira perfeita de visualizar um local.

Reprodutor de áudio Gear HTML5

Pacotes SVG animados de Gear Alfinete

Agora você pode facilmente mostrar sua música de forma criativa. Este Gear Player oferece uma interface de usuário muito envolvente que você definitivamente vai adorar.

Gráfico de pizza 3D com JavaScript

Gráfico de pizza 3D com JavaScript Alfinete

Este gráfico de pizza 3D foi desenvolvido em JavaScript, alternativa SVG e VML. Você pode personalizá-lo facilmente, alterar sua posição, altura, raio, atributos de legendas, tamanho do texto e muito mais.

Exemplos de ótimos sites que usam o poder do SVG

Cavalier: Conquistador de Excelência

Site Cavalier SVG Alfinete

Essas séries de jogos foram criadas usando SVG para animação e gráficos. Posture & Balance é o primeiro jogo criado para uma plataforma chamada Cavalier que foi projetada com tecnologias inovadoras.

Poignee de main virile

Site Poignee svg Alfinete

Este novo site animado e fotográfico foi construído para o estúdio de design gráfico e criativo digital Poignee de main virile, com sede na França. O resultado é incrível!

iFly50

site iFly50 svg Alfinete

Quando a FLY KLM Magazine comemorou sua quinquagésima edição, ela projetou um site com uma animação vívida para a coleção definitiva de viagens. Desta forma, foram apresentados os 50 lugares mais belos e fascinantes da Terra.

The ARK: Star Citizen Starmap

site svgStarmap Alfinete

Usando uma incrível interface ARK, este site apresenta a Robert's Space Industries, fabricante de naves espaciais, dentro do jogo “Star Citizen”. Este é um portal para informações, atualizações e compras de sua própria nave espacial com a qual você pode proteger os cidadãos de Star Citizen.

Mantenha os terremotos estranhos

Mantenha sites de terremotos que usam svg Alfinete

Keep Earthquakes Weird é uma plataforma criada com impressionantes efeitos gráficos SVG que foram construídos com o objetivo de preparar a população de Portland em caso de terremoto. O conteúdo é muito educativo.

30u

site svg 30u Alfinete

30u é uma e-shop que vende sapatos em um site criado por desenvolvedores que dão atenção ao estilo e usam alguns recursos SVG interessantes.

Grupo QED

Site svg do QED-Grupo Alfinete

O site do QED GROUP possui ilustrações sugestivas incríveis que lhe proporcionarão uma ótima experiência de navegação. O layout do site é elegante e inteligente.

Melanie Daveid

Site SVG Melanie Daveid Alfinete

O site de Melanie Daveid é um dos melhores sites de portfólio que podem ser encontrados na web. O site inclui transições suaves e lindas ilustrações à mão

WWF França – Hora do Planeta Paris

Site svg da WWF França Alfinete

Este site animado foi criado para a WWF França e foi usado para anunciar que no dia 19 de março as luzes da Torre Eiffel serão apagadas para a Hora do Planeta.

Nerisson

Site Nerisson SVG Alfinete

Nerisson aka Jimmy Raheriarisoa é um diretor de arte francês especializado em web/mobile design, ilustração e motion design. Este é um ótimo site de portfólio, com boas ilustrações e recursos gráficos.

Uma empresa de design

Um site svg de design Alfinete

A One Design Company é uma equipe experiente e entusiasta de designers, desenvolvedores, gerentes de projeto, escritores e artistas. O site deles é vívido e interativo, baseado em imagens SVG nítidas.

MIDORI AOYAMA

Site SVG MIDORI AOYAMA Alfinete

Midori Aoyama é uma DJ e produtora de Tóquio. Ele lançou seu próprio partido “EUREKA!” que ainda é uma das melhores festas de house music do Japão. Seu site também é inovador, um exemplo interessante de SVG e como você pode se beneficiar dele como usuário.