Home Coding, Scripting, Shaders

Tool for Creating Animated SVGs from SVG keyframes (proof of concept)

polycounter lvl 15
Offline / Send Message
arrangemonk polycounter lvl 15


for an animation project i needed a tool so i can animate my svg keyframes , which i created in Affinity designedr.

my problem is: affinity designer doesnt support animation, and i have a boatload of assets already created in affinity designer and i tried and failed (to some degree) to export it into all sorts of animation software . so after i researched with the possible export formats that i can create animations from my exported svgs via siml animation

so my first successful test was this:

my idea was, if i create some sort of template in [insert vector program with svg support here] , create copys of the file and change the shapes so i have keyframes

and then parse the svgs in my tool, match the shapes and animate them.

at the moment i can only match shapes by id and they have to be compatible (ie have the same amount of commands in their paths), also i am able to animate transformation matrixes , so color gradients can be animated.

my goal is to be able to match the most compatible shape, make it compatible and then animate it (a little like https://shapeshifter.design/ does it, but also using the autoawesome algorithm to find the closest match) so i dont have to manually assign a unique id to every animatable object (because that is tedious, and who wants to do tedious stuff)

also i want to assign frame timing and easing in filenames (i already tried it manually but havent implemented it)

anyway, weird stuff like this is possible with my tool already :

now the big question,

is anyone besides me interested in such a tool?

i can upload it to github , althou its still in a kind of messy state (which is embarassing XD)


Sign In or Register to comment.