<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<sectin class="circle">
    <div class="circle__area">
        <div class="circle__area">
            <div class="circle__element"></div>
        </div>
    </div>
</sectin>
</body>
</html>
</html>
.circle {
  &__area {
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #19AAD1;
    border-radius: 50%;
  }

  &__element {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #19AAD1;
    pointer-events: none;
    transition: 0.2s;
  }
}
View Compiled 
class Circle {
  constructor() {
    this.area = document.querySelector('.circle__area');
    this.element = document.querySelector('.circle__element');

    this.init();
  };

  init() {
    this.area.addEventListener('mousemove', this.onCircleElementMove);
  };

  
  onCircleElementMove = (event) => {
    const opp = this.getOpposite(event.pageX, event.pageY);
    this.element.style.left = opp.x + 'px';
    this.element.style.top = opp.y + 'px';
  };

  getOpposite(x, y) {
    const c = {x: 200, y: 200}; // центр круга
    const d = {x: x - c.x, y: y - c.y};
    const r = Math.sqrt(d.x*d.x + d.y*d.y) || 0.01;
    const R = 175; // радиус внешнего круга
    const k = R / r;
    const ox = Math.round(c.x - d.x * k);
    const oy = Math.round(c.y - d.y * k);
    return {x:ox, y:oy};
  }
};

const circle = new Circle();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.