JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<svg id="workspace" x="0" y="0" width="300" height="500">
  <svg class="tool" x="0" y="0" width="70" height="60">
    <rect width="40" height="40" x="5" y="5" rx="5" fill="#666666" fill-stroke="#000000"></rect>
    <circle class="out" cx="50" cy="25" r="7" fill="#999999"></circle>
  </svg>
  <svg class="tool" x="200" y="0" width="70" height="60">
    <rect width="40" height="40" x="15" y="5" rx="5" fill="#666666" fill-stroke="#000000"></rect>
    <circle class="out" cx="60" cy="25" r="7" fill="#999999"></circle>
    <circle class="in" cx="10" cy="25" r="7" fill="#999999"></circle>
  </svg>
</svg>

CSS

.connector {
  stroke:#009900;
  stroke-width:2;
}

JavaScript

var cOut = document.querySelector('.out');
var x1 = cOut.getBoundingClientRect().x;
var y1 = cOut.getBoundingClientRect().y;
var cIn = document.querySelector('.in');
var x2 = cIn.getBoundingClientRect().x;
var y2 = cIn.getBoundingClientRect().y;

var workspace = document.querySelector("#workspace");
var path = document.createElement('path');
path.setAttribute('d', "M" + x1 + "," + y1 + " " + "L" + x2 + "," + y2);
path.classList.add("connector");
workspace.insertBefore(path, workspace.firstChild);