md`# Pointer animation`
{
const dom = html`<div id="canvas" style="height: ${height}px" />`
const space = new pts.CanvasSpace(dom).setup({ bgcolor: '#fff' });
const form = space.getForm();
space.add((time) => {
form.fill('#236ff6')
form.stroke('#06a')
const size = pts.Num.lerp(4, 5, pts.Num.cycle(time % 1000 / 1000))
form.point(space.pointer, size, 'circle')
// Ring
form.strokeOnly('#a2b9e0').point(space.pointer, size * 10, 'circle');
form.strokeOnly('#95b0de').point(space.pointer, size * 10 + 5, 'circle');
})
space.bindMouse().bindTouch().play()
return dom;
}
height = 400;
pts = require('pts')
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.
