{
replay;
const contexta = DOM.context2d(200, 200, 1);
const contextb = DOM.context2d(200, 200, 1);
const context = DOM.context2d(200, 200, 1);
contexta.fillStyle = "red";
contexta.fillRect(0, 0, 150, 150);
contextb.fillStyle = "green";
contextb.fillRect(50, 50, 150, 150);
const a = contexta.getImageData(0, 0, 200, 200);
const b = contextb.getImageData(0, 0, 200, 200);
const c = context.createImageData(200, 200);
const interpolator = d3.interpolateNumberArray(a.data, b.data);
for (let i = 0, n = 120; i < n; ++i) {
c.data.set(interpolator(i / (n - 1)));
context.putImageData(c, 0, 0);
yield context.canvas;
await visibility();
}
}