:root{height:100vh;width:100vh;--repellerRadius: 100;--repellerDiameter: calc(var(--repellerRadius) * 2 * 1px)}body{margin:0;width:100vw;height:100vh;width:100%}#app{margin:0 auto}.circle{--radius: 50;--diameter: calc(var(--radius) * 2 * 1px);--x: 250;--y: 150;--cx: calc(var(--x) - var(--radius));--cy: calc(var(--y) - var(--radius));--dx: calc((var(--mouseX) - var(--x)) * -1);--dy: calc((var(--mouseY) - var(--y)) * -1);--d: hypot(var(--dx), var(--dy));--vx: calc(var(--dx) / var(--d));--vy: calc(var(--dy) / var(--d));--dLeft: calc( (var(--intersection) - var(--d)) * var(--vx) * var(--isIntersecting) );--dTop: calc( (var(--intersection) - var(--d)) * var(--vy) * var(--isIntersecting) );--intersection: calc(var(--radius) + var(--repellerRadius));--isIntersecting: clamp(0, calc(var(--intersection) - var(--d)), 1);position:absolute;left:calc((var(--cx) + var(--dLeft)) * 1px);top:calc((var(--cy) + var(--dTop)) * 1px);width:var(--diameter);height:var(--diameter);border-radius:50%;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at 20% 20%,#ffffffcf,#000000f2);box-shadow:inset 0 0 10px 1px #0000008f}.circle img{width:36px;height:36px}.circle:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.debug-circle{display:none}.debug .debug-circle{--radius: var(--repellerRadius);--x: var(--mouseX);--y: var(--mouseY);display:block;background:red;left:calc(var(--cx) * 1px);top:calc(var(--cy) * 1px);opacity:.4;box-shadow:none}.debug .debug-circle:after{content:none}