difference 블렌드 커서

<div class="wrap" id="wrap"><div class="bg"><i></i><i></i><i></i><i></i></div><div class="cursor" id="cur"></div></div>

.wrap{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden}
.bg{position:absolute;inset:0;display:flex}
.bg i{flex:1;height:100%}
.bg i:nth-child(1){background:#ff5c8a}
.bg i:nth-child(2){background:#5b5bf7}
.bg i:nth-child(3){background:#ffb648}
.bg i:nth-child(4){background:#18c29c}
.cursor{position:absolute;left:50%;top:50%;width:70px;height:70px;border-radius:50%;background:#fff;
  mix-blend-mode:difference;pointer-events:none;transform:translate(-50%,-50%)}

const wrap = document.getElementById('wrap');
const cur = document.getElementById('cur');
let auto = true, t = 0;
function place(x, y){ cur.style.left = x + 'px'; cur.style.top = y + 'px'; }
function loop(){
  if (auto) { t += 0.02; place(innerWidth / 2 + Math.sin(t) * innerWidth * 0.3, innerHeight / 2 + Math.sin(t * 1.7) * innerHeight * 0.28); }
  requestAnimationFrame(loop);
}
loop();
wrap.addEventListener('pointermove', (e) => { auto = false; place(e.clientX, e.clientY); });
wrap.addEventListener('pointerleave', () => { auto = true; });