Displaying animated diagrams in org-reveal slide decks with SVG

org-reveal can be used to author slide decks with org-mode. The slides are displayed as an HTML document animated with reveal.js.

reveal.js allows to progressively display fragments which reveal parts of a page, for instance a bullet list.

It is also possible to display animated diagrams, as reveal.js fragments, provided that such diagrams are made as embedded SVG images included in the HTML.

Adding class="fragment" (and variations, including the associated data-fragment-index attributes) to the SVG elements helps animate parts of the diagram with the same JS actions as for regular bullet fragments.

The trick is to embed the SVG diagram inside the HTML source using the following code in the org-mode source:

#+BEGIN_EXPORT html
<svg ...>  
    ...
</svg>  
#+END_EXPORT

I’ve found inspiration for that trick seeing the way SVG content was animated in the following demo.

So far, I’ve edited my diagrams with inkscape, and finally copied the whole <svg> tag from the saved inkscape file, into the #+BEGIN_EXPORT embedded HTML of the org file.

You can see a demo of such an animation in the https://olberger.gitlab.io/org-teaching/slides.html document (slide 26: “Fragmented SVG display”).

Hope this helps.