JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
     <g fill="none" stroke="black" stroke-width="2">
       <path id="arrowLeft"/>
     </g>
</svg>
<div id="a">Div 1</div>
<div id="b">Div 2</div>

CSS

html,
body {
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
}
#a, #b {
     color: white;
     text-align: center;
     padding: 10px;
     position: fixed;
     width: 100px;
     height: 20px;
     left: 100px;
}
#a {
     background-color: blue;
     top: 20px;
}
#b {
     background-color: red;
     bottom: 20px;
}

JavaScript

var divA       = document.querySelector("#a");
var divB       = document.querySelector("#b");
var arrowLeft  = document.querySelector("#arrowLeft");

var drawConnector = function() {
     var posnALeft = {
       x: divA.offsetLeft - 8,
       y: divA.offsetTop  + divA.offsetHeight / 2
     };
     var posnBLeft = {
       x: divB.offsetLeft - 8,
       y: divB.offsetTop  + divA.offsetHeight / 2
     };

     var dStrLeft =
         "M" +
         (posnALeft.x) + "," + (posnALeft.y) + " " +
         "C" +
         (posnALeft.x - 100) + "," + (posnALeft.y) + " " +
         (posnBLeft.x - 100) + "," + (posnBLeft.y) + " " +
         (posnBLeft.x) + "," + (posnBLeft.y);
     arrowLeft.setAttribute("d", dStrLeft);

};


drawConnector();