SVG Artista

Super handy SVG drawing animation tool

12 followers

Super handy SVG drawing animation tool

12 followers

Visit website

Graphic design tools

•

Design resources

SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code.

Launch tags:Productivity•Developer Tools

Launch Team

Anima - OnBrand Vibe Coding — Design-aware AI for modern product teams.

Design-aware AI for modern product teams.

Promoted

This is awesome!! Great job! Would be cool if you added animation-iteration-count for looping the css animation

Report

6yr ago

animista

Maker

@neil_vanlandingham Thanks so much Neil and thanks for the suggestion. We'll consider adding this feature in one of the future updates :)

Report

6yr ago

@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.

Report

6yr ago

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

Report

6yr ago

animista

Maker

@neil_vanlandingham @gustavo_xuxa Thanks for the kind words Gustavo! We will definitely try to add the looping feature in the next update.

Report

6yr ago

animista

Maker

@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 :)

Report

6yr ago

Maybe it's the SVG's I'm using, but I can't get this to work. Can you provide a tutorial and example SVG file?

Report

6yr ago

animista

Maker

@jonnymaceachern Sure, there is a CodePen example included on the https://svgartista.net/how-to page. Will be adding more examples later on :) I also highly recommend reading the following articles to learn how to prepare the SVG for animation: https://blog.logrocket.com/anima... and https://www.smashingmagazine.com...

Report

6yr ago

Product Hunt

Love tools like this. Constantly seeing cool animations on websites and wondering how to replicate them. Definitely giving this one a try

Report

6yr ago

SVG Artista

Maker

Thanks @aaronoleary! Hope it helps you create cool looking SVG animations ✌️

Report

6yr ago

How can I add it to my web project? I send it to call in my index.html, and the animation is apart, if the .svg works, but the animation does not work, I want it to be done when entering the web

Report

6yr ago

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.

Report

6yr ago

SVG Artista

Maker

@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.

Report

6yr ago