Recording and Saving an Svg Animation as an Animated Gif

How to save canvas animation as gif or webm?

In modern browsers you can use a conjunction of the MediaRecorder API and the HTMLCanvasElement.captureStream method.

The MediaRecorder API will be able to encode a MediaStream in a video or audio media file on the fly, resulting in far less memory needed than when you grab still images.

const ctx = canvas.getContext('2d');var x = 0;anim();startRecording();
function startRecording() {  const chunks = []; // here we will store our recorded media chunks (Blobs)  const stream = canvas.captureStream(); // grab our canvas MediaStream  const rec = new MediaRecorder(stream); // init the recorder  // every time the recorder has new data, we will store it in our array  rec.ondataavailable = e => chunks.push(e.data);  // only when the recorder stops, we construct a complete Blob from all the chunks  rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));    rec.start();  setTimeout(()=>rec.stop(), 3000); // stop recording in 3s}
function exportVid(blob) {  const vid = document.createElement('video');  vid.src = URL.createObjectURL(blob);  vid.controls = true;  document.body.appendChild(vid);  const a = document.createElement('a');  a.download = 'myvid.webm';  a.href = vid.src;  a.textContent = 'download the video';  document.body.appendChild(a);}
function anim(){  x = (x + 1) % canvas.width;  ctx.fillStyle = 'white';  ctx.fillRect(0,0,canvas.width,canvas.height);  ctx.fillStyle = 'black';  ctx.fillRect(x - 20, 0, 40, 40);  requestAnimationFrame(anim);}

<canvas id="canvas"></canvas>

Creating animated GIF files out of D3.js animations

The solution uses a tool called LICEcap, a screen capture utility for Windows and Mac. Steps are following:

1. Download LICEcap and install it. Now, if you start this program, it will have a rather unusual shape, just a thin frame, and everything inside the frame will be transparent:
   

2. Go to the window with your D3.js animation and prepare everything so that you could start animation at some point. Let's say we want to record this example from d3js.org:
   

3. Now start LICEcap and position it over the area you want to have in your animated GIF file:
   

4. Make sure that you enter at least 20 FPS in the bottom left edit box, otherwise the recording will be low quality. Press record. A dialog will first appear, and you choose here whether you want your GIF file to be in an infinite loop, or just repeated once, or any number of times. Also an interesting option is to add some visual clues for mouse clicks. Choose also filename, and press Save.
   

5. Now you do whatever you have to do to trigger animations. I pressed buttons Grouped and Stacked several times. After I decided it's enough, I pressed Stop. The resulting file is:
   

That's it!

How to record an HTML animation and save it as a video, in an automated manner in the backend

Late answer from someone looking for similar options due to the convenience of some browser SVG APIs:

My first recommendation, as someone who has written a fair amount of my own audio visualization software, is to use a graphics library and language that don't require a browser or GPU, like Gd or Anti-grain Geometry or Cairo with any server-side language. You might also check out Processing.org (which I haven't used), not sure if there's a headless version.

If that's not possible, I've found these so far but haven't tried them:

• https://github.com/tungs/timecut

• https://github.com/myplanet/headless-render

• https://wave.video/blog/how-we-render-animated-content-from-html5-canvas/

Programmatically generate video or animated GIF in Python?

Well, now I'm using ImageMagick. I save my frames as PNG files and then invoke ImageMagick's convert.exe from Python to create an animated GIF. The nice thing about this approach is I can specify a frame duration for each frame individually. Unfortunately this depends on ImageMagick being installed on the machine. They have a Python wrapper but it looks pretty crappy and unsupported. Still open to other suggestions.

---

Related Topics