JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/poilu/raphael-boolean/master/raphael.boolean.js"></script>

    <svg id="svg_container"></svg>

JavaScript

paper = new Raphael(document.getElementById('svg_container'), 1000, 1000);  
 var rect = paper.rect(500,120,100,100);
 rect.attr({fill: "#a00" , opacity:0.5,stroke: "none", opacity:0.5});
 var circ = paper.circle(500,200,50);
 circ.attr({fill: "#bb0" , opacity:0.5,stroke: "none", opacity:0.5});
  newPathStr = paper.union(rect, circ);
  newPath = paper.path(newPathStr);
  newPath.attr({fill: "#666"});