permalink
/

Keyshape Diagram

See the overview.

JavaScript support for stepping through animated SVG diagrams produced by Keyshape.

• create diagram in Keyshape with named timeline markers
• export as SVG (with embedded or external JS)
• add it to an <object> element with class="ksd"
• add HTML captions (caption id = timeline marker id)
• add the KeyshapeDiagram JS (ksd.js) to the page
• add the styling for the buttons (ksd.css)
• tweak some options (e.g., layout order of buttons/captions/diagram)
• optionally add no-JavaScript fallback

What you get:

• three buttons for stepping, running, and stopping (or resetting) the animation
• captions displayed as the animation progresses

Files

• JavaScript and CSS in src/
• examples in examples/
• documentation in docs.md

---

MIT License: note: example animations may contain embedded JavaScript from Keyshape which is not part of this project.