animation = {
const elem = html`<div>`;
const two = new Two({ width: 285, height: 200 }).appendTo(elem);
const circle = two.makeCircle(-70, 0, 50);
const rect = two.makeRectangle(70, 0, 100, 100);
circle.fill = '#FF8000';
rect.fill = 'rgba(0, 200, 255, 0.75)';
const group = two.makeGroup(circle, rect);
group.translation.set(two.width / 2, two.height / 2);
group.scale = 0;
group.noStroke();
while (true) {
if (group.scale > 0.9999) {
group.scale = group.rotation = 0;
}
const t = (1 - group.scale) * 0.125;
group.scale += t;
group.rotation += t * 4 * Math.PI;
two.update();
yield elem;
}
}
Two = (await import('two.js')).default
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.
