simple vector graphics + animation DSL - animation

Question

I'm looking for a vector graphics format that supports simple animations. At first I thought SVG would be the best. But SVG animation doesn't have any support in libraries. Is there some other format that would be useable for this?
I would like to have a Rust library, but have no problems writing an FFI to a C or C++ library either.
Any tips are welcome.

Answer 1

SVG's have some cool animation capabilities, i.e. transform: matrix() attribute + CSS transitions. My personal webpage in my profile has an example SVG I animated using CSS.
Here is some material I have gathered, I'm not sure of any other libraries though. The Three.js link has tons of additional info. Hope this helps.
Greensock Library
-- Greensock Animation Platform (GSAP) is a suite of tools for scripted animation. GSAP animates anything JavaScript can touch; i.e. CSS , SVG, React, & canvas. Overall, GSAP can manipulate property values at high speeds, which is one of the core techniques involved in CSS based transitions.
Aframe.io
-- A-Frame is a web framework based on Three.js for building virtual reality (VR) experiences. In addition to animation it features many other components and customizations.
Boxy SVG
-- Manipulate SVGs in a browser editor, with tutorials and more.
Gif.js
Vectr and Pixlr
Three.js Libraries & Plugins
Three.js WebGL
Lastly, two really cool sites I have found using WebGL/Three.js/SVG animation:
Interactive Example 1
Interactive Example 2

Answer 2

To your question/request..
"..I would like to have a Rust library, but have no problems writing
an FFI to a C or C++ library either."
I would recommend, a couple of nice options using Rust, C or C++.
The approach I took/recommend was 2 steps: first using Resvg to interact with the SVG, and then used another lib to animate.
Option 1:
please check out popular Resvg is a great lib Link, and github 1300 stars
Option 2:
please check out UX-Animate, which also has Rust apps & samples
// Scaling example in rust
use ux::prelude::*;
use ux::{Surface, Window};
#[derive(Default, Application)]
struct Application {
window: Window,
}
impl Application {
fn new() -> Self {
let app: Self = Default::default();
app.window
.set_window_size(512, 512)
.set_title("UX Framework - Scaling")
.show()
.connect_destroy(move |_win| Application::quit());
app.window.set_background_color(Some(color::GRAY_9));
let surface = Surface::new();
surface.set_size(400.0, 400.0);
// we should also change surface content size to avoid distortion
surface.set_content_size(400.0, 400.0);
surface.set_position(56.0, 56.0);
app.window.set_child(&surface);
surface.connect_draw(move |_widget, ctx, width, height| {
ctx.clear_rect(0.0, 0.0, width as f64, height as f64);
ctx.set_fill_color(color::TEAL_9); // Fill color
ctx.begin_path();
ctx.rect(10.0, 10.0, 90.0, 90.0);
ctx.fill();
ctx.scale(0.6, 0.6);
ctx.set_fill_color(color::ORANGE_9); // Fill color
ctx.begin_path();
ctx.rect(30.0, 30.0, 90.0, 90.0);
ctx.fill();
ctx.scale(0.8, 0.8);
ctx.set_fill_color(color::INDIGO_9); // Fill color
ctx.begin_path();
ctx.rect(50.0, 50.0, 90.0, 90.0);
ctx.fill();
false
});
app
}
}
fn main() {
Application::run();
}