getIllo = () => {
const w = width + 28,
h = 250;
const context = DOM.context2d(w, h, 1);
const goingIn = Math.random() > 0.5;
const getRandomColor = () =>
Math.random() > 0.75 ? "white" : `hsl(${Math.random() * 360},50%,50%)`;
context.canvas.style.margin = "0 -14px 0 -14px";
context.canvas.style.position = "relative";
context.canvas.style.zIndex = "-1";
context.canvas.style.imageRendering = "pixelated";
context.globalCompositeOperation = "xor";
const data = d3.range(10).map(d => ({
cx: Math.random() * w,
cy: Math.random() * h,
r: (Math.random() * h) / 4,
c: getRandomColor(),
t0: Math.random() * 2000
}));
let dr = goingIn ? 4 : 1;
d3.timer(t => {
if (t > 5000) return true;
data.forEach(d => {
if (t < d.t0) return;
context.strokeStyle = d.c;
context.beginPath();
context.arc(d.cx, d.cy, d.r, 0, Math.PI * 2);
context.stroke();
d.r += dr;
dr *= goingIn ? 0.995 : 1.01;
});
});
return context.canvas;
}