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

Atlassian LoomHit record, hand off to AI

Promoted

ByPeople

This is a goldmine for UI designers, love seeing more & more projects taking advantage of SVG's. Also enjoy the site's simplicity, well done 👌

Report

7yr ago

animista

Maker

So happy to hear you like it @juanpablosarmi. SVG Artista is made for creative people like you!

Report

7yr ago

Love it, this product is perfect for animations. Nice to have basic functionality e.g. option to remove svg elements.

Report

7yr ago

SVG Artista

Maker

Thanks @syed_asim, much appreciated ✌️

Report

7yr ago

Tunder Point of sale

I have tried it, and it is surprisingly awesome ! I don't know if it's possible but I ask. It would be awesome to be able to group some part of the SVG so that they appears by together at the same time. Thanks again :)

Report

7yr ago

SVG Artista

Maker

@stanislas_tribot_la_spiere Thanks so much! Yeah, I know what you mean – afraid it is not possible at the moment, but we might add this in the future :) For simple use cases, it could be possible to combine the SVG path data beforehand, in your code editor. This has some limitations though, e.g. the paths need to be the same color. Check out the following pen to see how to do it: https://codepen.io/shshaw/pen/mw...

Report

7yr ago

cool but I thing that GSAP animations is performs better. You may be surprised by how much work GSAP also JS does under the hood to make animating transforms intuitive and performant. i found some great examples here: www.adsspirit.com

Report

6yr ago

Versoly

Great product, I tried using undraw in it and it was a little slow. Anyway to speed it up?

Report

7yr ago

SVG Artista

Maker

Thanks @volkandkaya! Absolutely, you can tweak the animation duration, animation step, stagger step and easing values. Also, the 'erase' animations tend to look slightly better when the fill animation delay is set to zero. Hope this helps ✌️

Report

7yr ago