Super handy SVG drawing animation tool
Why
SVG Artista is a spin-off project of Animista.net. A lot of Animista users have been asking us about how we made the Animista splash screen animation. Therefore we decided to develop a tool that would simplify the process of creating such an animation. It was originally meant to be a part of Animista, but as it soon outgrew our original idea it made sense to make it a separate project.
What is SVG Artista
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.
SVG Artista generates the necessary CSS and updates the SVG code so that it can be easily animated by assigning the .active class to the SVG element. It doesn't rely on third-party JS libraries to work, although you will likely want to use one to dynamically set the .active class on some kind of trigger (e.g. on scroll into view). Depending on your preference, you can generate either the CSS transition or CSS animation code.
CSS animated SVG is fairly well supported and should work in all modern browsers. That said, SVG Artista generated code is provided as-is, without warranty of any kind. Use your judgment and test it in your target environment and browsers before using it in production.
What SVG Artista is not
SVG Artista is not a full blown SVG animation app. It doesn't support advanced SVG animation techniques nor does it have timelines. It is not a JS library and it cannot help you with SMIL animation.
Licensing
The generated code is publicly licensed under the MIT license. It means you can do anything you want with it. The code for the SVG Artista app itself is private and proprietary.