Make intersecting circle area dark

I have two circles that intersect and I want to make the intersecting area have a color, even when the two circles are transparent. I thought I could find some way to do this with css mix-blend-mode property but I have had no success with it.

Of course, I could make the circles have color and decrease their opacity, but I want them to be either white or transparent, where only the overlapped area gets background color.

I want the intersecting area to be able to change dynamically because one circle will follow the mouse. Here is the codepen for that.

I'm not sure where to start on this, if css has some technique or if it will have to be done with jquery.

$(document).mousemove(function(e) { 

  $('.cursor').eq(0).css({
    left: e.pageX - 25,
    top: e.pageY - 20
  });

  // circles
  var c1 = $('.cursor');
  var c2 = $('.circle');
  
  // radius
  var d1 = c1.outerWidth(true)/2;
  var d2 = c2.outerWidth(true)/2;
  
  // centers of first circle
  var x1 = c1.offset().left + c1.width()/2;  
  var y1 = c1.offset().top + c1.height()/2;
  
  // centers of second circle
  var x2 = c2.offset().left + c2.width()/2;
  var y2 = c2.offset().top + c2.height()/2;
  
  var i1 = c2.find('.inter1');
  var i2 = c2.find('.inter2');
  var o = c1.find('.overlap');
  
  function calc() {
    var a = d2;
    var b = d1;
    var c = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    var d = (b*b+c*c-a*a)/(2*c);
    var h = Math.sqrt((b*b) - (d*d));
    if (d < 0 || $.isNumeric(h)) {
      c2.css('border-color', 'red');
    } else {
      c2.css('border-color', 'black');
    }
    var x3 = (x2-x1)*d/c + (y2-y1)*h/c +  x1;
    var y3 = (y2-y1)*d/c - (x2-x1)*h/c +  y1;
    var x4 = (x2-x1)*d/c - (y2-y1)*h/c +  x1;
    var y4 = (y2-y1)*d/c + (x2-x1)*h/c +  y1;
    
    if ($.isNumeric(h)) {
      i1.show();
      i2.show();
    } else {
      i1.hide();
      i2.hide();
    }
    i1.offset({ top: y3-5, left: x3-5});
    i2.offset({ top: y4-5, left: x4-5});
  } calc();
  
  
});

body {
  background: #fff;
}

.overlap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cursor {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  z-index: 999;
  border: 1px solid black;
  outline: 1px solid #c9d3ff;
  overflow: none;
}

.circle {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid black;
  outline: 1px solid #c9d3ff;
}

.circle::after,
.cursor::after {
  display: block;
  content: '';
  height: 1px;
  background: #c9d3ff;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

.circle::before,
.cursor::before {
  display: block;
  content: '';
  width: 1px;
  background: #c9d3ff;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
}

.inter {
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  position: absolute;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
</div>

<div class="circle">
  <div class="inter1 inter"></div>
  <div class="inter2 inter"></div>
  <div>

from Make intersecting circle area dark