Para animar nuestro SVG nos ocupamos de ajustar las siguientes partes del SVG en nuestro CSS – la clase «.st0» y la etiqueta <path></path>.
Copie y pegue el siguiente código en su archivo CSS.
Podemos configurar los colores de trazo y relleno de nuestro SVG en la clase «.st0» y en la etiqueta <path></path>. Aquí los hemos configurado en negro #000. Observe que empezamos con un trazo blanco #FFF y sin color de relleno. en Adobe Illustrator. Esto es válido para todas las propiedades del SVG, se pueden cambiar en nuestro archivo .css.
Este es el resultado
Puedes personalizar absolutamente la animación. Observe que hemos utilizado una animación cúbica-bezier arriba. Aquí hay un buen lugar para personalizar la animación https://cubic-bezier.com/
Encuentra el código completo de nuestra página web a continuación
HTML
CSS
Obtén Adobe Illustrator desde aquí https://www.adobe.com/products/illustrator.html
Eso es todo amigos, si os ha gustado este artículo visitad nuestra página de Facebook y nuestra web IRIS WEB CORE.
Y como siempre ¡que tengáis un buen día!