Hay una web que destaca por la animación de su logo: animista.net, una herramienta de diseño que podemos usar para crear animaciones CSS sin necesidad de programar en exceso.
Por lo visto, varios usuarios les preguntaron cómo consiguieron animar el archivo SVG de su página principal, y los responsables comenzaron a trabajar en un proyecto que ayudara a hacer exactamente eso: crear animaciones a partir de un SVG.
El resultado es svgartista.net, una herramienta que simplificaría el proceso de creación de la animación que animista tiene en portada, herramienta que originalmente estaba destinado a ser parte de Animista, pero como pronto superó su idea original y decidieron convertirlo en un proyecto separado.
SVG Artista ayuda a animar las propiedades de trazo y relleno en las imágenes SVG con código CSS simple. Debería funcionar bien con ruta, línea, polilínea, rectángulo, círculo… pero no funciona con gradientes.
La herramienta genera el CSS necesario y actualiza el código SVG para que pueda animarse fácilmente asignando la clase .active al elemento SVG. No depende de las bibliotecas JS de terceros para funcionar, aunque es probable que acabemos usando alguna para establecer dinámicamente la clase .active en algún tipo de disparador (por ejemplo, en la vista de desplazamiento).
El resultado debería funcionar en todos los navegadores modernos.
El código generado por SVG Artista se proporciona tal cual, sin garantía de ningún tipo, por lo que aconsejan probarlo bien antes de ponerlo en producción.