In my last Awwation update I talked about the new CSS Themes support.

This time, I have another improvement. In the old version, the timeline strip had bad thumbnails. I was using canvg to render the SVG onto a Canvas and then drawing the Canvas bitmap as a snapshot:

Old strip. Bad snapshots.

This time, I’ve dropped the Canvas approach altogether since I discovered the <use> SVG element. <use> allows you to ‘href’ to an SVG element residing in the DOM and display a ‘reference’ to that SVG. You can also add overriding properties such as a viewBox and transforms.

In action:

New awesome strip. Live, moving, 100% accurate snapshots.

Now you can pick any element as a path node in the presentation timeline, and a snapshot of it as it exactly as it appears in the document, during the presentation, will be shown in the strip. How is this better than Prezi’s strip? Well, here, changes are reflected as they happen – so, if I’m moving an element around in the editor, you can see it moving around in the strip too!