Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Esplendor do SVG: 10 Exemplos Inspiradores Pela Web

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Inspiration: Online Stores Where Products Are Placed Front and Center
A Few Juicy, Inspirational New Websites

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Gráficos em vetor escaláveis (SVG) não precisão de apresentação. Eles crescem e diminuim nitidamente, funcionam bem com animação e são um formato poderoso para ícones e mais. Esse publicação de inspiração é parte de uma série da Envato Tuts+, trazendo uma lista de dez sites que usam o SVG de forma inspiradora tecnologicamente e criativamente.

Waark

Waark é um estúdio criativo da web que se orgulham na criação elegante e funcional de sites cutomizados. Quando lançado, conquistou a comunidade com toda sua glória, estado da arte da animação com Canvas e, claro, SVG.

httpwaaarkcom
waaark.com

Algumas das melhores animações acontecem na carga de sequências onde um gráfico ganha vida e continua com movimentos súbtos. Também é bom notar que a maioria das animações SVG usa a biblioteca GreenSock. Vejam o vídeo publicado por I Hate Tomatoes desconstruindo o site em detalhes:

Typerterms da Supremo

Typeterms é uma planilha de atalhos tipográfica animada. Novato na tipografia ou apenas querendo refrescar a memória, Typeterms é uma ferramenta perfeita.

httpswwwsupremotvtypeterms
www.supremo.tv/typeterms/

Uso bem inspirador do SVG ensinando sobre terminologia da tipografia. Cada caracter da lição chama atenção para o termo discutido, facilitando a identificação do que é apresentado. Embora não considere o site inspirador tecnicamente, acho-o bem criativo. Muitos movimentos do SVG são divididos em partes, usando CSS para movê-los.

Cuberto

Cuberto é uma agência digital criativa do Reino Unido e é uma equipe com olho afiado para design e animação. O jeito que o site usa SVG é maravilho, do uso dos movimentos das letras, ao pequeno indicador do mouse, dando dicas ao usuário para rolar.

httpcubertocom
cuberto.com

Cada movimento das letras é 100% SVG. Cuberto utiliza máscaras para criar cada forma dos caracteres com texturas separadas. Site bem inspirador com uso criativo de animação e SVG. Para os fanáticos por GreenSock, ele é usado aqui. Excelente.

Horizon

Horizon é um "Backend de Tempo Real em JavaScript" que ajuda a criar e publicar rapidamente usando uma APi simples.

httphorizonio
horizon.io

A parte mais legal do site, e a única parte que usa SVG, é a tela que contem cenas em movimento. Ela usa GSAP e uma série de máscaras e clip-paths. Outro aspecto legal é que é possível aninhar SVG em outro SVG! Maravilhoso!

SVG Porn

Onde vamos quando queremos logos de qualidade em SVG? SVG Por, claro! Uma grande coleção de logos para desenvolvedores, editores e designers, em várias categorias.

httpsvgporncom
svgporn.com

É simples, intuitivo e direto. SVG Porno provê um espaço para logos em SVG (incluido o exempl acima), abertos ao público e otimizados (sem caminhos duplicados, sem grupos em excesso, sem defs vazios, etc) e disponíveis no GitHub.

Ícones em React

Essa ferramenta em particular mostra como criar gráficos usando SVG matematicamente, JavaScript e React.

httpjxnblkcomreact-iconslive-demo
jxnblk.com/react-icons/#live-demo

Usando cada slider, um usuário pode atualizar os pontos do caminho do SVG e até mudar o diâmetro.

Isso é usado para criar gráficos feitos matematicamente e com pixels perfeito que a maioria dos apps não consegue. Essas ferramentas que mostram códigos de acordo que atualiza opções são quase mágicas, quando vemos os gráficos se transformando. Muito inspirador e fantástico.

Fleximize Squad

Fleximize é uma empresa que oferece empréstimos a pequenas empresas com uma missão de revolucionar o mundo financiamento empresarial.

Fleximize Squad é uma experiência baseada inteiramente em animações SVG. Com 3 histórias diferentes interrelacionadas, usuários podem acessar uma forma legal de pedir empréstimos.

httpsfleximizecommission
fleximize.com/mission

Esse site de explodir a mente trás áudio e animação em SVG e, claro, usa GreenSock. É uma experiência bem linear, não podemos esperar o botão de voltar funcionando, mas é um exemplo fantástico que adoramos inspecionar com as Ferramentas para Desenvolvedores.

Mo.js

O projeto Mo.js, da LegoMushroom, é uma biblioteca para criar animações rápidas e suaves, e efeitos para web.

O que achamos muito inspirador desse projeto é o uso de física nas animações, como embaçamentos, pulos e mais–além de ser open source e qualquer um poder contribuir para aprimorar o código dele. Mencionei que também compina áudio? Veja o projeto, agora!

Demos: https://github.com/legomushroom/mojs#demos

Trulia: Currículo de Aluguel

Trulia é um site e um aplicativo móvel sobre imóveis que permite encontrar casas, provendo compradores, inquilinos e vendedores as dicas necessárias para tomar a melhor decisão de onde morar.

httpwwwtruliacomrentrental-resume
www.trulia.com/rent/rental-resume

Algumas vezes, as animações mais legais são as súbtas, e nesse caso, foi exatamente o que capturou nossa atenção. Essa animação de SVG (criada por Jon Campos e animada por Sarah Drasner) vende bem a ideia de enviar o currículo, e mostra como é fácil enviar um currículo, passando, visualmente, pelos passos. Tanta beleza feita com SVG e GreenSock.

Geração de SVG

É preciso de padrões em SVG para o próximo projeto? SVG Generation é um ótimo lugar para quem precisa e é possível customizar antes de baixar. Pode-se criar tudo: zig-zags, espirais, cubos, listras e mais. Até jeans:

httpwwwsvgenerationcomrecipesBlue-Jean
www.svgeneration.com/recipes/Blue-Jean

Pode-se customizar os parâmetros, como cor da linha, tamanho e preenchimento. Um projeto massa e de código aberto no GitHub. Podemos ver outro gerador de padrões em SVG do Philip Rogers e baseado na Galeria de Padrões em CSS de Lea Veoru.

Circulus & Sistema Visualizasor de Coordenadas do SVG

Quem conhece SVG conhece o trabalho de Sara. Escolhemos essas demos porque achamo-nas bem úteis, tanto educacionalmente quanto em forma de projeto.

Se demorar para entender o que o atributo viewBox é, não se preocupe. Essa demo acabará com o mistério que é a viewBox e mostrará, em tempo real, como os valores afetam o resultado. Exelente trabalho Sara!

httpssarasoueidancomdemosinteractive-svg-coordinate-system
sarasoueidan.com/demos/interactive-svg-coordinate-system/

Circulus é outra daquelas ferramentas de demonstração em tempo-real que também podemos usar os resultados em projetos. Menus circuçares são legais, especialmente ao vê-los criados e customizados bem na frente.

Conclusão

SVG está por toda a web, hoje em dia! Fale-nos sobre sites inspiradores que você viu o esplendor do SVG, e veja esses recursos de aprendizados no Tuts+ para aprender logo:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.