Public
Edited
Mar 9, 2022
1 star
Insert cell
Insert cell
{
const aspect = 16 / 9;
const height = width / aspect;
const context = DOM.context2d(width, height);
const coefficient = 0.0003;
let frame, force = 0;
(function tick() {
context.clearRect(0, 0, width, height);
context.beginPath();
let displacement = 1;
for(let x = 0; x < width; x++) {
context.lineTo(x, 0.5 * height - displacement * (0.2 * height));
force -= coefficient * displacement;
displacement += force;
}
context.stroke();
frame = requestAnimationFrame(tick);
})();
invalidation.then(() => cancelAnimationFrame(frame));
return context.canvas;
}
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