dottie.js

Play any Dottie drawing on any web page, straight from the .dottie file.

dottie.js draws and animates .dottie files in the browser, with nothing rendered ahead of time. What you get is what Dottie draws: the same sketchy strokes, connectors, notes, timing, camera moves and scenes. Every demo on this site is played this way.

Put a drawing on your page

Add the script once, then a <dottie-player> for each drawing:

<script type="module" src="https://cdn.jsdelivr.net/npm/@phin-tech/dottie/dist/dottie-player.js"></script>

<dottie-player src="tour.dottie"></dottie-player>

Or install it with npm and import it in your own build:

npm install @phin-tech/dottie

import "@phin-tech/dottie/player";   // registers <dottie-player>

An animation plays with the controls you see above: play and pause, a scrubber, scene back and next for a click-through, and the keyboard (space, ← →, and , . to step a frame). It pauses while scrolled out of view, and shows its finished state to people who prefer reduced motion. A drawing without animation is just the picture.

Attribute
src	The .dottie file. Or put the file inside: <dottie-player><script type="application/json">{…}</script></dottie-player>
page	Which page to show, by name or number; the first by default
at	Show this moment (in seconds) as a still
clean	Draw precisely instead of sketchy
no-controls, no-autoplay, no-loop
label	What screen readers announce; the page name by default

The same drawing, still and clean, three seconds in:

<dottie-player src="tour.dottie" at="3.2" clean></dottie-player>

Shapes the drawing makes clickable work with the mouse and the keyboard (Tab, then Enter or Space): a click plays a scene on to the next one, opens a link in a new tab, or shows the page a shape's link points at, and the shape takes its hover color under the pointer. Button symbols show their over and down looks, and take clicks on their hit area; a symbol's copy set to play when clicked plays its animation through. Only http, https and mailto links are ever followed, and nothing in a drawing runs as code, so a drawing from anyone is safe to play. Each click first fires a cancelable action event whose detail is {element, scene | url | page, replay?}; call preventDefault() to handle it yourself.

From script, the element has play(), pause(), nextScene(), prevScene(), activate(elementId), currentTime, duration and paused, and fires load, frame, action and error events.

Or compile it into one file

dottie-compile turns a drawing into a single script that holds both the player and the drawing, so there is one file to host:

npx -p @phin-tech/dottie dottie-compile tour.dottie     # writes tour.js

<script src="tour.js"></script>

The player appears where the script tag is (or inside data-target="#some-id"), and data-* attributes on the tag set its options, like data-clean or data-no-loop. Dottie's command-line tool makes the same file with dottie render tour.dottie -f js.

Here is one. Everything below comes from a single script tag, <script src="labels.js" data-class="player"></script>, and the file is all there is (labels.js, 80 KB):

Every demo on this site is compiled too: build.js, zoom.js, tour.js, labels.js, live.js and stagger.js.

Render SVG in code

The library also runs in Node, to make SVG on a server or at build time:

import { render } from "@phin-tech/dottie";
import { readFileSync, writeFileSync } from "node:fs";

const svg = render(readFileSync("tour.dottie", "utf8"), { at: 3.2, clean: true });
writeFileSync("tour.svg", svg);

What it covers

Everything Dottie draws and animates, checked against Dottie itself on every change: see PARITY.md for the list, and the dottie.js README for the full API.