10 Ejemplos de animaciones SVG para diseñadores web

 

Las mejores animaciones SVG para diseñadores web

Animaciones SVG para diseñadores web. SVG (Scalable Vector Graphics) tiene una serie de ventajas en comparación con otros formatos de imagen utilizados en la web. En primer lugar, los SVG son escalables, por lo que pueden adaptarse a cualquier tamaño de pantalla sin pérdida de calidad. Luego, los navegadores pueden cargarlos más rápido, usando menos recursos. Y, pueden ser editados con CSS como si fueran simples elementos de HTML. Además de ser utilizado para imágenes estáticas, también puede crear animaciones impresionantes con SVG. En este artículo, he recopilado 10 ejemplos de animaciones SVG para inspirarte a usarlas también en tus propios proyectos web.

1. Become a Traveler Today (Animaciones SVG)

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.default

Esta impresionante demo de ‘Become a Traveler Today’ de José Aguinaga es actualmente la animación SVG más popular en CodePen, y esto no es una coincidencia, ya que se ha invertido mucho trabajo en este proyecto artístico. El autor creó los gráficos con Adobe Illustrator y los exportó con el plugin SVG Export. También utilizó el preprocesador Sass para crear la animación de fotogramas clave que mueve cuidadosamente el globo alrededor de la pantalla.

Descarga este SVG desde este enlace.

2. SVG Loader Animations

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.default

Estos cargadores puros de SVG de Nikhil Krishnan son un bonito ejemplo de cómo crear animaciones SVG adecuadas para proyectos web en el mundo real. Al igual que la demostración ‘Become a Traveler Today’, estos cargadores también utilizan el preprocesador Sass. Sin embargo, aquí, la animación es un efecto SVG nativo añadido directamente al elemento animateTransform SVG dentro de la página HTML.

Descarga este SVG desde este enlace.

3. Project Deadline Is Coming

See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.default

Este genial proyecto de animación de Jonathan Silva es escalofriante y divertido a la vez. Demuestra muy bien que realmente se pueden utilizar las animaciones SVG para cualquier tipo de proyecto creativo. Con este pequeño pero inteligente recordatorio de plazos, puedes motivar a tu equipo a cumplir con los plazos, sin ser un fastidio. Aquí, el autor creó el efecto animado usando la regla @keyframes de CSS y un poco de jQuery para establecer el tiempo.

Descarga este SVG desde este enlace.

4. SVG Text Animation Using Stroke Offset Method

See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.default

Además de las imágenes animadas, también puede utilizar animaciones SVG para crear efectos impresionantes de texto. Por ejemplo, echa un vistazo a esta bonita animación de texto de Mack Ayache. Él hace uso de simples formas SVG para crear las letras. A continuación, añade el movimiento por separado a cada letra utilizando los atributos SVG stroke-dashoffset y stroke-dasharray. Sin embargo, añade estos atributos al CSS en lugar de al elemento <svg> dentro del HTML. Él puede hacer eso porque los atributos de presentación de SVG pueden ser utilizados como propiedades CSS también.

Descarga este SVG desde este enlace.

5. Sketch Photo Animation

See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.default

Esta animación de fotos exclusivas de Kristen Zirkler puede ser una gran incorporación a cualquier interfaz de usuario que muestre fotos de perfil. La autora creó el gráfico en Adobe Illustrator colocando dos capas una encima de la otra, una para su foto y otra para el camino que va alrededor de su cara. Luego, usó Sass para agregar la animación de fotogramas clave que modifica las reglas de desplazamiento-desplazamiento y opacidad.

Descarga este SVG desde este enlace.

6. Beating Heart Animation (Animaciones SVG)

See the Pen Beating Heart – CSS and SVG animation – low poly by morkett (@morkett) on CodePen.default

Si quieres ver un ejemplo de una animación SVG realmente sofisticada, echa un vistazo a la animación del corazón palpitante cuidadosamente elaborada por David Corkett. A pesar de que es un efecto complicado, no utiliza ningún tipo de JavaScript, sino que se basa únicamente en SVG y CSS. El corazón está hecho de múltiples polígonos a los que el autor añadió efectos de entrada y salida usando la regla @keyframes de CSS.

Descarga este SVG desde este enlace.

7. Pointless Rider (Animaciones SVG)

See the Pen Pointless Rider by Elliott Munoz (@elliottmunoz) on CodePen.default

Si alguna vez has querido crear un logo animado, aquí tienes un excelente ejemplo. La demo de Pointless Rider de Elliott Muñoz muestra que también puedes usar animaciones SVG para temas de marca. Por defecto, es un elegante logotipo en blanco y negro. El autor añadió el sutil efecto de animación con los elementos SVG animateTranform y animateMotion. Aquí, el CSS sólo alinea los elementos y establece los colores, pero es el SVG el que se encarga de todo el movimiento en la pantalla.

Descarga este SVG desde este enlace.

8. Sovog 404 Page (Animaciones SVG)

See the Pen Sovog 404 page by Marco Barría (@fixcl) on CodePen.default

Las páginas 404 son otra área en la que puedes poner en práctica con éxito una animación SVG. La demostración de la página Sovog 404 de Marco Barría se basa en SVG y Sass para hacer que el robot levante sus extremidades. Aunque las partes del robot son todas trayectorias SVG separadas, se mueven hacia arriba y hacia abajo con la ayuda de la transformación: rotate(); propiedad CSS, utilizada en cada trayectoria individualmente.

Descarga este SVG desde este enlace.

9. List Expand SVG Animation

See the Pen List Expand by Daniel (@daniel_wolf) on CodePen.default

Si quieres un ejemplo de una animación SVG que puedas usar fácilmente en proyectos cotidianos, aquí tienes una interesante demostración. Esta elegante animación de expansión de una lista de Daniel Wolf puede funcionar bien en cualquier aplicación móvil o web en la que se quiera mostrar información ampliada a los usuarios. De acuerdo con la descripción del autor, la clave para este efecto es «el tiempo en que los elementos se mueven en la transición». Las animaciones se basan en CSS así como en un poco de jQuery para la funcionalidad de clic.

Descarga este SVG desde este enlace.

10. SVG Animation with Sliders

See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.default

Esta bella animación SVG de Kenneth Aamås con controles deslizantes de demostración utiliza tanto Sass como JavaScript para lograr un efecto inteligente y controlado por el usuario. Puede cambiar las dimensiones de la imagen con la ayuda de tres sliders en la parte inferior de la página. Cada slider está atado a una parte diferente de la imagen que comienza a moverse cuando el usuario cambia la posición del slider. Para esta animación, el autor utiliza la propiedad CSS de transición en lugar de las animaciones de fotogramas clave, lo que resulta en un efecto más sutil.

Descarga este SVG desde este enlace.

Si te han gustado estos efectos en CSS te invito a que leas el artículo Efecto De Burbujas Con CSS Como 7UP. y recuerda compartir este artículo en tus redes sociales 🙂

Y si quieres aprender más sobre diseño web, mi canal de Youtube

Si te apasiona el mundo del diseño y desarrollo web, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉