JSFiddle - React, Tailwind, and code Playground

by PiotrGa

HTML

<head lang="en">
</head>

<body>
  <div id="container1" style="width: 1000px;height: 500px">

    <svg class="baseSVG" style="width: 100%; height: 90%;">
      <g class="chart_wrapper">
        <g class="links">
          <g class="link_wrapper">
            <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 L 242.21936721772218 252.41406759336707"></path>
            <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 242.21936721772218 252.41406759336707 L 137.63410024475814 280.8314657786965"></path>
          </g>
          <g class="link_wrapper">
            <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 A 303.64066468574316 303.64066468574316 0 0 1 247.4635305967095 271.71429428774377"></path>
            <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 247.4635305967095 271.71429428774377 A 303.64066468574316 303.64066468574316 0 0 1 137.63410024475814 280.8314657786965"></path>
          </g>
          <g class="link_wrapper">
            <path class="link hate half1" half1="true" d="M 137.63410024475814 280.8314657786965 A 166.82033234287158 166.82033234287158 0 0 1 231.73104045974543 213.81361420460564"></path>
            <path class="link hate half2" marker-start="url(#double-arrow)" half1="false" d="M 231.73104045974543 213.81361420460564 A 166.82033234287158 166.82033234287158 0 0 1 346.8046341906862 223.99666940803763"></path>
          </g>
        </g>
        <g id="person0" class="node person Adam" transform="translate(346.8046341906862,223.99666940803763)">
          <g class="node_inner" transform="translate(-50,-30)">
            <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
            <text text-anchor="middle" transform="translate(50,70)">Adam</text>
          </g>
        </g>
        <g id="person1" class="node person Eve" transform="translate(137.63410024475814,280.8314657786965)">
...

CSS

.node_background {
  fill: #CAD658;
  stroke: #CAD658;
  opacity: 0.1;
}

.link {
  stroke: #4043d6;
  stroke-width: 5px;
  fill: none;
}

.arrow {
  stroke: #000;
  fill: #000;
  stroke-width: 1;
  stroke-dasharray: 0;
}