JSFiddle - React, Tailwind, and code Playground

by jaygiri

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="298.001" height="298.001" viewBox="0, 0, 298.001, 298.001">
    <g id="bgcircle" transform="translate(-91, -79)">
        <circle id="a" cx="198" cy="186" r="102" fill-opacity="1"></circle>
        <circle id="b" cx="283" cy="186" r="102" fill-opacity="1"></circle>
        <circle id="c" cx="198" cy="271" r="102" fill-opacity="1"></circle>
        <circle id="d" cx="283" cy="271" r="102" fill-opacity="1"></circle>
    </g>
    
  <g id="venn4" transform="translate(-91, -79)">

      
      <path id="A" d="M198.5,84.5 C210.469,84.471 222.313,86.661 233.571,90.689 C235.932,91.534 238.19,92.643 240.5,93.619 C209.575,107.064 187.409,136.559 182.195,169.833 C149.188,175.754 118.914,197.056 105.619,228.5 C99.312,215.338 96.866,200.979 96.5,186.5 C96.5,130.167 142.167,84.5 198.5,84.5 z" fill-opacity="1" stroke="#000000" stroke-width="0"/>
      
      <path id="B" d="M282.5,84.5 C338.833,84.5 384.5,130.167 384.5,186.5 C384.529,198.469 382.339,210.313 378.311,221.571 C377.466,223.932 376.357,226.19 375.381,228.5 C364.656,203.681 342.86,183.934 317.571,174.689 C309.303,171.667 307.358,171.582 298.949,169.862 C293.805,136.484 271.15,107.329 240.5,93.619 C253.662,87.312 268.021,84.866 282.5,84.5 z" fill-opacity="1" stroke="#000000" stroke-width="0"/>
    
      <path id="C" d="M105.619,228.5 C116.344,253.319 138.14,273.066 163.429,282.311 C171.697,285.333 173.642,285.418 182.051,287.137 C187.196,320.516 209.85,349.669 240.5,363.381 C227.338,369.688 212.979,372.134 198.5,372.5 C142.167,372.5 96.5,326.833 96.5,270.5 C96.471,258.531 98.661,246.687 102.689,235.429 C103.534,233.068 104.643,230.81 105.619,228.5 z" fill-opacity="1" stroke="#000000" stroke-width="0"/>
    
      <path id="D" d="M375.381,228.5 C381.688,241.662 384.134,256.021 384.5,270.5 C384.5,326.833 338.833,372.5 282.5,372.5 C270.531,372.528 258.687,370.339 247.429,366.311 C245.068,365.466...

CSS

#A, #a {
    fill: #01AED8;
}

#B, #b {
    fill: #ff9800;
}

#C, #c {
    fill: #ab47bc;
}

#D, #d {
    fill: #9ccc65;
}

#a, #b, #c, #d {
    fill-opacity: .25;
}

#ABC-ABCD {
    fill: #3B4638;
    fill: #535E50;
    fill: #617161;
}

#ABD-ABCD {
    fill: #3A7B27;
}

#BCD-ABCD {
    fill: #8D4E23;
}

#ACD-ABCD {
    fill: #2B536A;
}

#CD-A-B-ABCD {
    fill: #8E6D76;
}

#BD-A-C-ABCD {
    fill: #BB9D2C;
}

#AC-B-D-ABCD {
    fill: #3A62BA;
}
#AB-C-D-ABCD {
    fill: #4E8D43;
}
#ABCD {
    fill: #2A3D1F;
}

#venn4 path {
    fill-opacity: .4;
    stroke: yellow;
    stroke-width: 3;
    stroke-opacity: 0;
    transition: .3s;
    
}
#venn4 path:hover {
    fill-opacity: .2;
    stroke-opacity: 1;
    stroke: yellow;
    fill: yellow;
}
#venn4 path.selected {
    fill-opacity: .2;
    stroke-opacity: 1;
    fill: yellow;
}