multiple clippath olverapped SVG circles intersections

forked from romsson's block: detect olverapped SVG elements intersections

forked from romsson's block: clippath olverapped SVG circles intersections

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
   
    var n = 4,
        s = 100,
        r = 50;
    
    function pts(nb) {

var alpha = (2 * Math.PI) / nb,
          res = [];

for(var i = 0; i < (2*Math.PI); i += alpha) {

res.push({
          x: Math.cos(i),
          y: Math.sin(i)
        });

}

return res;
    }

</script>
</body>

https://d3js.org/d3.v4.min.js