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

arrangemonk

Hi,

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)

Tiles

Just upload, it doesn't hurt :)

arrangemonk

i cleaned up the code somewhat and uploaded it

https://github.com/Arrangemonk/Framer

i still have to add proper documentation but at the moment it just accepty filenames as parameters

iam717

idk why but i am lmao at that last img animation, oh boy, i got nothing to contribute, cool otherwise.

Eric Chadwick

Ack you removed the animated files I guess? Broke the front page. :(

arrangemonk

they are hosted on svgshare.com, the site has some downtime ocassionally. i can put them somewhere else if thats better (now i linked to the demo files in the github repository)

Eric Chadwick

Thanks man. This is a cool tool!

arrangemonk

update: it doesnt look like much, but i can proerly align paths so they can be morphed, next is to permute and inverse(clockwise/counterclockwise) paths so the path doesnt overlap during morph

pior

This is extremely interesting. Could this potentially lead to 2D polygonal animations technically similar to the Flashback/Another World cinematics ?

poopipe

its no different from any other vertex animation in principle and assuming nothing really weird is going on should be automagically compatible with blendshapes . 

all you'd need is conversion to a format you could dump into unreal/unity/whatever (discounting any markup you'd need for shading effects etc)