Published
Edited
Feb 19, 2020
4 forks
42 stars
Insert cell
Insert cell
animation = {
const canvas = svg`<svg width=50 height=50></svg>`
const circle = canvas.appendChild(svg`<circle cx=25 cy=25 r=5 />`);
let animation = requestAnimationFrame(function tick() {
circle.setAttribute("r", Math.sin(Date.now() / 1000) * 10 + 15);
animation = requestAnimationFrame(tick);
});
invalidation.then(() => cancelAnimationFrame(animation));
return canvas;
}
Insert cell
Insert cell
Runtime = (await import("@observablehq/runtime@4/dist/runtime.js")).Runtime
Insert cell
Insert cell
notebook = (await import("https://api.observablehq.com/@jashkenas/ouroboros-a-notebook-embeds-itself.js?v=3")).default
Insert cell
Insert cell
new Runtime().module(notebook).value("animation")
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more