Animación SVG

Te damos la bienvenida a nuestro curso completo de SVG, diseñado para diseñadores web y desarrolladores front-end que quieran mejorar sus habilidades. Tanto si eres principiante como si quieres perfeccionar tus técnicas de animación de SVG, este curso es perfecto para ti.

En solo unas horas, crearás varios proyectos SVG y explorarás varias técnicas de animación. La animación en la interfaz de usuario de un sitio web ahora es una práctica estándar, y este curso te presentará formas innovadoras de elevar tus proyectos de clientes.

Partimos de los conceptos básicos de SVG y avanzaremos progresivamente hacia conceptos avanzados. Cada sección cubre proyectos de animación SVG sofisticados, lo que garantiza una comprensión profunda de las técnicas básicas y avanzadas.

Al final, podrás hacer diseños vivos directamente en tu navegador web. Al igual que en este ejemplo.

Junto con esto, hay un proyecto maravilloso para estudiantes Cargando animación con spinners

Para quién es el curso:

Diseñadores web y desarrolladores front-end.
Estudiantes que hayan usado HTML/CSS anteriormente y quieran mejorar sus animaciones SVG y explorar nuevas técnicas.
Requisitos:

Cualquier editor de texto (se recomienda Visual Studio Code).
Experiencia básica con HTML y CSS.
Aunque no es obligatorio, sería beneficioso estar familiarizado con cualquier software de gráficos vectoriales como Illustrator.
Lo que vas a aprender:

Conocimiento completo de SVG, desde niveles principiantes hasta avanzados.
Animación SVG avanzada y diseño de interfaz de usuario.
Técnicas para crear logotipos e iconos animados SVG.

43 Lecciones (4h 59min)

1 - Introducción al curso
2 - Incluir SVG en HTML
3 - Tutorial de ViewPort y ViewBox en SVG
4 - Tutorial de elementos de línea de SVG
5 - Tutorial de elementos de rección de SVG
6 - Tutorial de elementos de círculo de SVG
7 - Tutorial de elementos de elipse de SVG
8 - Tutorial de elementos de polilínea de SVG
9 - Tutorial de elementos de polígono SVG
10 - Tutorial de elementos de ruta de SVG
11 - Tutorial de elementos de ruta de SVG, parte 2
12 - Tutorial de elementos de ruta de SVG, parte 3
13 - Tutorial de elementos de texto SVG
14 - Tutorial de elementos de imagen SVG
15 - Tutorial de propiedades de trazo de SVG
16 - Tutorial de propiedades de relleno de SVG
17 - Tutorial de elementos de agrupación de SVG
18 - Defensas de SVG, símbolos y elementos de uso
19 - Tutorial de elementos de SVG TextPath
20 - Degradados lineales de SVG
21 - Degradados radiales de SVG
22 - Adobe Illustrator para svg
23 - Animación Svg ClipPath
24 - Agregar JavaScript en la imagen svg
25 - Filtro SVG
26 - Implementación de filtro SVG
27 - Filtro feColorMatrix SVG
28 - Filtro SVG FeComponentTransfer
29 - Filtro feComposite SVG
30 - Filtro feConvolveMatrix SVG
31 - Filtro de iluminación SVG feDiffuse - 32 - Filtro SVG feDisplacementMap
33 - Filtro de turbulencia SVG
34 - Animación de automóviles en movimiento
35 - Animación de seguimiento de rutas Svg
36 - Animación de envoltura de mosaico Svg
37 - Animación con desplazamiento flotante 3D
38 - Enmascaramiento de texto SVG con video
39 - Dibujo con desplazamiento
40 - Animación de cargador de SVG
41 - Turbulencia de imagen y desplazamiento, parte 1
42 - Turbulencia de imagen y desplazamiento, parte 2
43 - Animación de reunificación de mapas Svg