SVG Artista

Little tool that helps you create SVG animations

#4 Product of the WeekAugust 27, 2019
+1
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG graphics with CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements.
Discussion
Would you recommend this product?
12 Reviews2.5/5
Love tools like this. Constantly seeing cool animations on websites and wondering how to replicate them. Definitely giving this one a try
Thanks @aaronoleary! Hope it helps you create cool looking SVG animations ✌️
@syswarren @de maybe something you both would use?
@de @aaronoleary Might test it if I have svg to animate!
Very cool and simple tool. Because of its limitations (stroke and fill animation), I see this as a way to just add a little pizazz to static graphics on a site or as a basic intro type animation. If you were to add other animations, like bounce in, slide in, etc, maybe you can monetize then. Good stuff.
@xcast3d Thanks, you're right - we really wanted to keep this one simple and to the point :) Appreciate the suggestion though, if there is enough interest we might head that way. You may also want to have a look at our other product, animista.net too. It is a CSS playground/library and I suppose it could be possible to combine it with SVG Artista to achieve some of the effects.
This is awesome!! Great job! Would be cool if you added animation-iteration-count for looping the css animation
@neil_vanlandingham Thanks so much Neil and thanks for the suggestion. We'll consider adding this feature in one of the future updates :)
@neil_vanlandingham @ana108 This tool is just amazing and it saves a lot of time. Thanks and congratulations on making a such incredible tool. But for it to be 100% perfect (for my usage), I think it only lacks on the looping thing. If you guys could add this feature it would help me, and other people, a lot.
and for those who wants to make a loop out of this, just change "both" at the css class for "infinite alternate" and it will make a back and forth loop
@neil_vanlandingham @gustavo_xuxa Thanks for the kind words Gustavo! We will definitely try to add the looping feature in the next update.
@gustavo_xuxa Great tip, just want to add that instead of replacing the 'both' value, adding the 'infinite alternate' before the 'both' should work fine :)
Does it only support fill and stroke animations?
@andrei_nedelcu yes. Stroke works with path, line, polyline, rect, circle ellipse and polygon elements.