12 escenas de paisajes construidas completamente con CSS y SVG

Puedes hacer cosas bastante locas con SVG. Es posible que los desarrolladores codifiquen gráficos en una página sin ningún archivo de imagen simplemente usando la función SVG y lienzo.

Esto conduce a proyectos realmente geniales como los paisajes SVG puros que he recopilado aquí.

Todos estos proyectos son totalmente gratuitos para editar y usar. Trabajan en código SVG junto con algunos CSS y JS básicos para crear animaciones, distorsiones y efectos de paralaje.

Bahía de Hawke

Este ejemplo de un hermoso paisaje de bahía fue desarrollado por Louis Coyle. Sigue una apariencia de estilo poli que imita la visualización de polígonos que normalmente se encuentra en la representación 3D.

Es un efecto popular con SVG y JavaScript, pero ciertamente no es fácil de lograr.

Louis usa la biblioteca TweenMax para crear animaciones que son elegantes tanto en estilo como en código.

Si alguna vez ha querido profundizar en el código SVG sin procesar, este fragmento tiene mucho de lo que aprender.

Paisaje de baja poli

Aquí hay otro paisaje modelado según el estilo low poly.

Este proviene del desarrollador Luke Reid y se enfoca mucho más en los efectos 3D. Todo el diseño se siente muy real, y el degradado del cielo salpicado de estrellas le da vida a este diseño.

Si observa el código JavaScript, verá que las posiciones de las estrellas se generan aleatoriamente. Este es un efecto genial si alguna vez estás diseñando un fondo SVG o un estilo de encabezado de héroe.

Animación de paisaje SVG

Evan Winston desarrolló esta animación personalizada que muestra lentamente todos los elementos visibles.

Es un efecto muy bueno, y es algo que cualquiera podría crear. De acuerdo, esto puede no ser tan útil como una gran ilustración de fondo, principalmente debido al tiempo requerido para que se complete la animación.

Pero podría hacer algo similar con iconos SVG personalizados en un sitio web. Hay muchos tutoriales para ayudarlo a diseñar SVG básicos y luego animarlos usando el código del fragmento anterior (que también se ejecuta en TweenMax).

Paisaje Marino

Para una vista básica junto al lago, realmente estoy cavando este fragmento SVG. Tiene algunas animaciones de página básicas como las olas en el agua y las nubes en el fondo.

Todo esto es bastante fácil de hacer con un poco de JavaScript. ¡Pero notará que este fragmento está hecho con CSS puro , lo que lo hace aún más impresionante!

La animación CSS3 moderna es más útil en sitios web con animaciones UI/UX, pero también puede usarla para paisajes o ilustraciones. Esa es la mitad de la diversión de ser un desarrollador.

paisaje de invierno

Este paisaje invernal es un recordatorio de la nieve blanca y fresca que vemos todos los años.

Andrey Sorokin creó esta animación básica con solo código SVG y algo de JavaScript. La animación puede ser lenta, por lo que es posible que deba darle un minuto para ver el efecto completo.

Estoy muy impresionado con la calidad de los efectos de aceleración y lo bien que funciona en el navegador.

Según la cantidad de elementos que se animan a la vista, habría asumido un poco de lentitud, pero se carga increíblemente rápido teniendo en cuenta todo lo que está sucediendo.

Sin mencionar que la animación del sol que sale del árbol es simplemente encantadora.

paisaje SVG

Hemos visto un crecimiento masivo en las tendencias de diseño plano y diseños semiplanos que usan colores básicos sin degradados.

Este fragmento sigue el mismo estilo con bordes duros para las sombras y las esquinas.

Es un fragmento hermoso y, sin duda, uno de los paisajes solo SVG más fáciles de trabajar. Incluso si nunca ha usado código SVG antes, este fragmento ofrece mucho para investigar y muchos atributos SVG/XML que puede buscar en Google para obtener más información.

Paisaje natural

El desarrollador Amr Zakaria creó un diseño plano similar con este paisaje utilizando barcos y aviones animados para captar su atención.

Todo se ejecuta en CSS puro y funciona con algunas animaciones de fotogramas clave CSS bastante claras.

Todo esto se puede replicar para un fondo en una página web si tiene la paciencia para hacerlo funcionar. La parte más difícil es lograr que esto responda completamente a las pantallas móviles.

Luces de paralaje

De todos los efectos de paralaje en la web, este es muy básico. Sin embargo, también es bastante impresionante, ya que todo funciona solo con CSS , sin necesidad de secuencias de comandos.

Todos los elementos, incluidas las farolas, están diseñados con formas SVG y efectos CSS.

Si miras muy de cerca, notarás que las lámparas usan el efecto de sombra CSS para crear un brillo realista.

Animaciones básicas

En este panorama SVG actualizado, encontrará una gran cantidad de elementos personalizados que saltan a la vista.

El creador Stef van Dijk presta mucha atención a cada animación al agregar efectos de rebote y gravedad en cada pieza. Por ejemplo, cuando las montañas aparecen a la vista, notará un efecto de rebote desde el suelo.

Esto es lo que obtienes cuando prestas mucha atención a los detalles y es por eso que soy un gran admirador de las animaciones web modernas.

SVG y CSS

Eche un vistazo a este bolígrafo para obtener una animación de fondo de gran tamaño. Todo esto funciona en SVG y CSS puro sin JavaScript.

Las capas del paisaje aparecen lentamente y todas tienen sus propias animaciones de fotogramas clave. Pero una vez que estén a la vista, notará que algunos elementos siguen moviéndose (como el sol y las nubes).

Diseñar algo así lleva mucho tiempo. Pero también lo familiarizará con la sintaxis SVG junto con los conceptos básicos de la animación CSS.

Césped

Si bien este panorama es muy simple, también creo que es un gran maestro para los nuevos programadores de frontend.

Felix De Montis creó este proyecto desde cero con una pequeña cantidad de código SVG para la hierba, las colinas y los árboles. Es bastante fácil replicar eso y cambiar las posiciones usando CSS también.

En general, si te gustan los diseños SVG simples, este es un excelente lugar para comenzar. Felix también usa el preprocesador LESS si está buscando algo más allá del CSS básico.

Página de paralaje

Chris Gruber desarrolló este inmaculado paisaje de paralaje que se mueve según los movimientos del mouse.

Pero junto con eso, también animó ciertos elementos de la página como el velero y las nubes de fondo.

Todo esto requiere muy poco JavaScript ya que opera en menos de 20 líneas de jQuery. Aún más impresionante teniendo en cuenta lo detallado que es esto.