All examples By author By category About

veltman

Gif rendering - SVG to GIF

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