Convert SVG Animation to webm or mov

I am looking for a reliable and easy to execute method of converting pure SVG Animation into a video format, preferably webm or mov. The animation in question can be found here - it is my personal work and the result of learning how to handle SVG:

https://jsfiddle.net/473btp7e/

To my surprise my initial searches only yielded incomplete answers with often varying results. Upon further research I found this blog post which creates a webm of an SVG animation using MediaRecorder API.

Is there a way of applying said script to my animation so that I get a webm as the result.

Answers:

Answer

If you look closely at the code in that example, you'll see that the video is created by drawing each frame, one by one, onto a canvas which is connected to a MediaRecorder.

So you'll need to do the same: Pause the animation for each frame, draw that frame onto a canvas, move the animation a little for the next frame, and repeat.

There is code for drawing an SVG onto a canvas in the linked example, so the tricky part is to pause the animation at any given time to make a frame, since your animation is all CSS. You can do that by pausing the animation (animation-play-state: paused) and adjusting the animation-delay. Here is an example of that by itself:

https://codepen.io/Sphinxxxx/pen/zjXqej?editors=1010

So you can do something similar in your code:

//Loop through all animated elements, and update their animation-delay.
//Together with "animation-play-state: paused", this freezes the animation at the specified time.
function freeze(time) {
    animed.forEach(x => {
        const css = x.style;

        if(!x.__originalDelay) {
            const delay = css.animationDelay;
            x.__originalDelay = delay.match(/\d/) ? delay : '0s';
        }

        css.animationPlayState = 'paused';
        css.animationDelay = `calc(${x.__originalDelay} - ${time}ms)`;
    });
}

Updated demo:

https://jsfiddle.net/473btp7e/2/

Update: Better Firefox support, and the ability to control each frame manually with requestFrame()

https://jsfiddle.net/473btp7e/82/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.