simple vector graphics + animation DSL

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();
}