Tag: reveal.js

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.

Using org-mode and org-reveal for teaching material

I’ve finally put together in a single example repo an example of the way I manage teaching material with org-mode.

It needs more docs and work, but should be usable. Docs and demo at http://www-public.tem-tsp.eu/~berger_o/org-teaching/ and the Gitlab repo at https://gitlab.com/olberger/org-teaching for those curious.

It doesn’t intend to be a full-fleshed product (also the name is just a codename), but release early, release often, they said 😉

Of course, teaching requires much more stuff than slides and handbooks, but eh, that’s my contribution for the moment.

Update 2017/05/18: I’ve updated the docs and repo to include generation of a “printed slides deck” in PDF, using DeckTape.