Gráficos vectoriales escalables (SVG) es un formato de imagen escrito en XML. Con SVG, puede codificar gráficos escalables bidimensionales. Luego, puede implementarlos y modificarlos en CSS y JavaScript.
SVG permite tres tipos de gráficos: formas vectoriales (líneas rectas y curvas en todas las direcciones y formas), imágenes y texto. Debido a sus diversas capacidades, los diseñadores web recurren a SVG para realizar animaciones complejas. Son fáciles de instalar, no pierden calidad cuando cambian de tamaño y no requieren ninguna aplicación de terceros para funcionar.
Como las animaciones siguen creciendo en popularidad, la mayoría no está familiarizada con ellas. Este artículo resaltará 20 fantásticas animaciones SVG que muestran el potencial de este formato.
1. Iconos SVG médicos por kittons
enlaces rápidos
- 1. Iconos SVG médicos por kittons
- 2. Desplazarse por SeanMcCaffery
- 3. Tire hacia abajo para actualizar (avión de papel) por Nikolay Talanov
- 4. Sigue adelante por Diaco M. Lotfollahi
- 5. Filtros SVG agregados al video HTML5
- 6. rompecabezas
- 7. Liner Gradient por Patrick Young
- 8. Viajemos por jjperezaguinaga
- 9. Reloj de Mohamad Mohebifar
- 10. Iconos animados de Luigi De Rosa
- 11. Todos los dispositivos en SVG por Chris Gannon
- 12. Cascada de Chris Gannon
- 13. Generador de plantas por Blake Bowen
- 14. Icono en el que se puede hacer clic por Hamish Williams
- 15. Nuevo pastel de Marco Barría
- 16. Trituradora de papel de Chris Gannon
- 17. Low PolyLion por GRAYGHOST
- 18. Hourglass Loader de Leela
- 19. Vaca receptiva por Sarah Drasner
- 20. Estudiante por Domany
- Tu turno
Esta animación cálida y suave es ideal para cualquier sitio web relacionado con la salud. Mientras lista a través de los diferentes hilos, las imágenes aparecerán sutilmente. Se construirá el automóvil de la ambulancia o el átomo, se abrirá el ojo y el médico saltará. Esta animación muestra toda la diversión y el dinamismo de SVG.
Enlazar
2. Desplazarse por SeanMcCaffery
Animación universal que puedes poner en cualquier sitio web interactivo. La apariencia sutil de los bordes cuando pasas el mouse te deja con una sensación satisfactoria y te invita a hacer clic en el enlace.
Enlazar
3. Tire hacia abajo para actualizar (avión de papel) por Nikolay Talanov
Por lo general, las páginas se actualizarán cuando las “tire hacia abajo”. Esta animación lleva esto a un nuevo nivel. Cuando tire hacia abajo para liberarlo, lanzará un avión de papel hacia el cielo. Si desea que sus visitantes actualicen su aplicación con frecuencia, debería considerar agregar una animación como esta.
4. Sigue adelante por Diaco M. Lotfollahi
Una animación SVG que muestra el potencial del Vector de escala. El movimiento suave y preciso del cuerpo humano es hipnotizante.
Enlazar
5. Filtros SVG agregados al video HTML5
Paul Irish, del equipo de Google Chrome, observó cómo SVG puede modificar el contenido fuera de los gráficos vectoriales. Combinó CSS y SVG para crear sorprendentes filtros visuales para mostrar que la animación SVG puede ser una excelente adición a un video listo.
Enlazar
6. rompecabezas
Puedes crear increíbles rompecabezas interactivos con animación SVG. En este ejemplo, podemos elegir una de las muchas imágenes y ver cómo se descompone en muchas piezas pequeñas del rompecabezas. ¡También puedes reconstruirlo!
Enlazar
7. Liner Gradient por Patrick Young
Si te gustan las luces de neón y las fuentes hermosas, disfrutarás de esta animación. Este trabajo muestra cómo no necesita líneas en movimiento para una animación brillante, solo una gran fuente y un código de color adecuado con efecto de degradado.
Enlazar
8. Viajemos por jjperezaguinaga
Dos aviones y un globo aerostático giran en torno a los lugares más populares del mundo. Esta animación es colorida, optimista y alucinante. Muestra todo lo que puedes hacer si eres hábil en SVG.
Enlazar
9. Reloj de Mohamad Mohebifar
Una animación SVG simple de un reloj en movimiento que muestra la hora actual. El movimiento relajante de los punteros y el diseño minimalista hacen maravillas para esta animación.
Enlazar
10. Iconos animados de Luigi De Rosa
Si pasa el cursor sobre estos iconos, activará las animaciones, que son simples pero efectivas. Puedes ver que no tienes que hacer maravillas para crear un ícono animado impresionante.
11. Todos los dispositivos en SVG por Chris Gannon
Una animación de una sola toma que repasa todos los dispositivos inteligentes que utilizamos de la manera más creativa. El escritorio se convertirá en una computadora portátil, la computadora portátil en una tableta y luego en un teléfono inteligente.
Enlazar
12. Cascada de Chris Gannon
Otro de Chris Gannon, esta es una clara demostración del fondo de una cascada de espuma. El movimiento del agua es ordenado, y puedes ver pequeñas gotas de salpicaduras de agua que salen de los bordes de la animación para que todo parezca más realista.
Enlazar
13. Generador de plantas por Blake Bowen
Ahora este es algo más. Cuando haces clic en el botón 'Crear', verás plantas creciendo y creciendo. Pero cada vez que haga clic, se formarán diferentes patrones.
Enlazar
14. Icono en el que se puede hacer clic por Hamish Williams
Otro SVG interactivo que desencadena una animación una vez que haces clic en él. Este iniciará la animación "Enviar" una vez que haga clic en él.
Enlazar
15. Nuevo pastel de Marco Barría
Animación interesante que muestra cómo se hace un pastel capa por capa. Es una impresionante animación SVG adecuada para una tarjeta de cumpleaños.
16. Trituradora de papel de Chris Gannon
Si le gusta ver la trituración de papel, disfrutará de esta animación que representa una máquina triturando papel por papel ilimitadas veces en una secuencia perfecta.
Enlazar
17. Low PolyLion por GRAYGHOST
Esta es una ilustración y animación alucinante que representa la cabeza de un león que aparece y desaparece en forma de polígonos animados.
Enlazar
18. Hourglass Loader de Leela
Otra animación efectiva que usa solo SVG. Cada 5 segundos, el reloj de arena se invertirá y comenzará un nuevo ciclo.
Enlazar
19. Vaca receptiva por Sarah Drasner
Esta es una divertida animación interactiva que te permite hacer clic en una vaca y arrastrarla alrededor de la luna mientras un astronauta desconcertado la mira.
20. Estudiante por Domany
¡Un estudiante entusiasta parece listo para aprender! Es una gran animación donde las páginas del libro están girando ordenadamente. Sin parpadeo del estudiante, pero esta sigue siendo una animación perfectamente ordenada para concluir esta lista.
Enlazar
Tu turno
¿Cuáles son tus animaciones SVG favoritas que no están incluidas en esta lista? ¡Comparte tus selecciones en los comentarios a continuación!
