12 cenas de paisagem construídas inteiramente com CSS e SVG

Você pode fazer algumas coisas bem loucas com SVGs. É possível que os desenvolvedores codifiquem gráficos em uma página sem nenhum arquivo de imagem apenas usando o recurso SVG e tela.

Isso leva a projetos muito legais, como as paisagens SVG puras que coletei aqui.

Todos esses projetos são totalmente gratuitos para editar e usar. Eles trabalham em código SVG junto com alguns CSS e JS básicos para criar animações, distorções e efeitos de paralaxe.

Baía de Hawke

Este exemplo de uma bela paisagem da baía foi desenvolvido por Louis Coyle. Ele segue uma aparência de estilo poli, imitando a exibição de polígono normalmente encontrada na renderização 3D.

É um efeito popular com SVG e JavaScript, mas certamente não é simples de realizar.

Louis usa a biblioteca TweenMax para criar as animações que são elegantes tanto no estilo quanto no código.

Se você já quis se aprofundar no código SVG bruto, este trecho tem muito o que aprender.

Paisagem Low Poly

Aqui está outra paisagem modelada após o visual low poly.

Este vem do desenvolvedor Luke Reid e coloca um foco muito mais forte nos efeitos 3D. Todo o layout parece muito real, e o gradiente do céu salpicado de estrelas dá vida a esse design.

Se você observar o código JavaScript, verá que as posições das estrelas são geradas aleatoriamente. Este é um efeito legal se você estiver projetando um plano de fundo SVG ou estilo de cabeçalho de herói.

Animação de paisagem SVG

Evan Winston desenvolveu esta animação personalizada que coloca lentamente todos os elementos visíveis à vista.

É um efeito muito legal, e é algo que qualquer um poderia criar. É verdade que isso pode não ser tão útil como uma grande ilustração de fundo, principalmente por causa do tempo necessário para a conclusão da animação.

Mas você pode fazer algo semelhante com ícones SVG personalizados em um site. Existem muitos tutoriais por aí para ajudá-lo a criar SVGs básicos e depois animá-los usando o código do trecho acima (também rodando no TweenMax).

Paisagem marinha

Para uma visão básica à beira do lago, estou realmente cavando este trecho de SVG. Ele ostenta algumas animações básicas de página, como as ondas na água e as nuvens no fundo.

Tudo isso é muito fácil de fazer com um pouco de JavaScript. Mas você notará que este trecho é feito com CSS puro , tornando-o ainda mais impressionante!

A animação CSS3 moderna é mais útil em sites com animações UI/UX, mas você também pode usá-la para paisagens ou ilustrações. Isso é metade da diversão de ser um desenvolvedor.

Paisagem de inverno

Esta paisagem de inverno é um lembrete da neve branca que vemos todos os anos.

Andrey Sorokin criou esta animação básica apenas com código SVG e algum JavaScript. Pode ser lento para animar, então você pode ter que esperar um minuto para ver o efeito completo.

Estou mais impressionado com a qualidade dos efeitos de atenuação e como isso funciona no navegador.

Com base em quantos elementos estão sendo animados, eu teria assumido um pouco de lentidão, mas ele carrega incrivelmente rápido, considerando o quanto está acontecendo.

Sem falar que a animação do sol saindo da árvore é simplesmente deliciosa.

Cenário SVG

Vimos um crescimento maciço em tendências de design plano e designs semiplanos que usam cores básicas sem gradientes.

Este trecho segue o mesmo estilo com bordas duras para as sombras e cantos.

É um belo trecho e certamente uma das paisagens somente SVG mais fáceis de se trabalhar. Mesmo que você nunca tenha usado código SVG antes, este snippet oferece muito o que pesquisar e muitos atributos SVG/XML que você pode pesquisar no Google para saber mais.

Paisagem natural

O desenvolvedor Amr Zakaria criou um design plano semelhante com essa paisagem usando barcos e aviões animados para chamar sua atenção.

A coisa toda é executada em CSS puro e funciona com algumas animações de quadro-chave CSS bastante claras.

Tudo isso pode ser replicado para um plano de fundo em uma página da Web, se você tiver paciência para fazê-lo funcionar. A parte mais difícil é fazer com que isso seja totalmente responsivo para telas de dispositivos móveis.

Luzes de paralaxe

De todos os efeitos de paralaxe na web, este é muito básico. No entanto, também é bastante impressionante, pois a coisa toda funciona apenas em CSS , sem necessidade de script.

Todos os elementos, incluindo as lâmpadas de rua, são projetados com formas SVG e efeitos CSS.

Se você olhar bem de perto, notará que as lâmpadas realmente usam o efeito de sombra CSS para criar um brilho realista.

Animações básicas

Neste cenário SVG atualizado, você encontrará vários elementos personalizados que saltam à vista.

O criador Stef van Dijk presta muita atenção a cada animação, adicionando efeitos de salto e gravidade em cada peça. Por exemplo, quando as montanhas aparecem, você notará um efeito rebote do solo.

Isso é o que você obtém quando presta muita atenção aos detalhes e é por isso que sou um grande fã de animações modernas da web.

SVG e CSS

Dê uma olhada nesta caneta para uma animação de fundo superdimensionada. Essa coisa toda funciona em SVGs e CSS puro sem qualquer JavaScript.

Camadas da paisagem aparecem lentamente e todas elas têm suas próprias animações de quadro-chave. Mas uma vez que eles estão à vista, você notará que alguns elementos continuam se movendo (como o sol e as nuvens).

Projetar algo assim leva muito tempo. Mas também o familiarizará com a sintaxe SVG junto com o básico da animação CSS.

Grama

Embora esse cenário seja muito simples, também acho que é um ótimo professor para novos codificadores de frontend.

Felix De Montis construiu este projeto do zero com uma pequena quantidade de código SVG para grama, colinas e árvores. É fácil replicar isso e alterar as posições usando CSS também.

No geral, se você gosta de designs SVG simples, este é um ótimo lugar para começar. Felix também usa o pré-processador LESS se você estiver procurando por algo além do CSS básico.

Página de paralaxe

Chris Gruber desenvolveu esta paisagem de paralaxe imaculada que se move com base nos movimentos do mouse.

Mas junto com isso ele também animou alguns elementos da página como o veleiro e as nuvens de fundo.

Tudo isso requer muito pouco JavaScript, pois opera em menos de 20 linhas de jQuery. Ainda mais impressionante considerando o quão detalhado isso é.