block by veltman 1071413ad6b5b542a1a3

Gif rendering - SVG to GIF

Full Screen

Testing in-browser gif generation from an SVG with gif.js. Works in recent Chrome/Safari/Firefox.

Process:

  1. Create a standard SVG line chart.
  2. Step through in-between frames of the line chart: for each one, update the SVG, render to an image, add the image element to a stack of gif frames.
  3. Render frames together in the background using gif.js web workers.
  4. When rendering’s complete, add the blob URL as an image and start the SVG on an infinite loop with d3.timer (gratuitous).

See also: Gif Globe, Gif New Jersey

index.html

gif.js

gif.worker.js