() translation by (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.
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.
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.
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.
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.
É 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.
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.
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.
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:
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!
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:
