Thank you so much! I'm happy you liked the idea! ^^
I'll admit I wasn't too knowledgeable about SVG animations, but wanting to help, I asked GPT-4 for help XD
From what I've understood, it seems that SVG and SMIL are the best choice for vector animations! So, SVG is basically an XML format made for scalable vector graphics, and SMIL is an XML language for synchronizing and animating multimedia.
It seems that SVG combined with SMIL allows for a wide variety of animations, not only the basic ones (movement, rotation, scaling, color), but even path animations where you can move individual points (for shape animations and the like) :D
Here are some resources I gathered on the topic:
- SVG Documentation: https://www.w3.org/TR/SVG2/
- MDN on SVG: https://developer.mozilla.org/en-US/docs/Web/SVG
- SMIL in SVG: https://www.w3.org/TR/REC-smil/
- MDN on SVG animations with SMIL: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
- Wikipedia on SVG: https://en.wikipedia.org/wiki/SVG
- Wikipedia on SMIL: https://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language
- SVG + SMIL Example (just click on "Raw" to see the animations. It works in Chrome but not sure about other browsers): https://gist.github.com/bigxixi/011ff9c633fc50aeb9398f3b42e1b69b?short_path=c355...
Additionally, I found some open-source tools that might be of interest (though the licenses might not be fully compatible, someone from these communities might be able to help, or they could provide some inspiration):
- OpenToonz Vector levels (PLI format): https://opentoonz.readthedocs.io/en/latest/drawing_animation_levels.html
- ShapeShifter: https://github.com/alexjlockwood/ShapeShifter
- Synfig (Vector Animation) - Exports to LOTTIE format: https://www.synfig.org/ https://github.com/synfig/synfig/
- HaikuAnimator (Vector Animation) - Also exports to LOTTIE: https://www.haikuanimator.com/
- More on LOTTIE: https://lottiefiles.com/
I hope this info comes in handy when you dive into this feature in the future! :)