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
Aaron O'Leary
Community @producthunt. Chef.
Love tools like this. Constantly seeing cool animations on websites and wondering how to replicate them. Definitely giving this one a try
Upvote (4)
Share
Sergej Skrjanec
Maker
Maker / Front-end Dev
Thanks @aaronoleary! Hope it helps you create cool looking SVG animations ✌️
Upvote
Share
Aaron O'Leary
Community @producthunt. Chef.
@syswarren @de maybe something you both would use?
Upvote (1)
Share
Julie Chabin
Head of Product Design at Product Hunt
@de @aaronoleary Might test it if I have svg to animate!
Upvote (1)
Share
Xavier CastanedaDeveloper of kittylauncher.com
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.
Upvote (1)
Share
Sergej Skrjanec
Maker
Maker / Front-end Dev
@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.
Upvote (2)
Share
This is awesome!! Great job! Would be cool if you added animation-iteration-count for looping the css animation
Upvote (1)
Share
Ana Travas
Maker
UI Designer / FE Developer
@neil_vanlandingham Thanks so much Neil and thanks for the suggestion. We'll consider adding this feature in one of the future updates :)
Upvote (1)
Share
@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.
Upvote
Share
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
Upvote
Share
Ana Travas
Maker
UI Designer / FE Developer
@neil_vanlandingham @gustavo_xuxa Thanks for the kind words Gustavo! We will definitely try to add the looping feature in the next update.
Upvote (1)
Share
Ana Travas
Maker
UI Designer / FE Developer
@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 :)
Upvote (1)
Share
Andrei Nedelcu
Growth hacker and product guy.
Does it only support fill and stroke animations?
Upvote
Share
Ana Travas
Maker
UI Designer / FE Developer
@andrei_nedelcu yes. Stroke works with path, line, polyline, rect, circle ellipse and polygon elements.
Upvote
Share