Html. Нарисовать линию

var first = document.getElementById('first'); 
var second = document.getElementById('second'); 
var line = document.getElementById('line').getElementsByTagName('line')[0]; 
 
function shuffle() { 
    var pos = { 
        ft: Math.round(Math.random() * 50), 
        fl: Math.round(Math.random() * 50), 
        st: Math.round(Math.random() * 100) + 100, 
        sl: Math.round(Math.random() * 100) + 200 
    } 
    first.style.top = pos.ft + 'px'; 
    first.style.left = pos.fl + 'px'; 
    second.style.top = pos.st + 'px'; 
    second.style.left = pos.sl + 'px'; 
    line.setAttribute('x1', pos.fl + first.offsetWidth); 
    line.setAttribute('y1', pos.ft + first.offsetHeight); 
    line.setAttribute('x2', pos.sl); 
    line.setAttribute('y2', pos.st); 
} 
 
shuffle(); 
 
document.getElementById('shuffle').addEventListener('click', shuffle);

div { 
    position: absolute; 
    border: 2px solid #000; 
    width: 100px; 
    height: 50px; 
} 
 
#line { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    stroke: #F00; 
    stroke-width: 2px; 
    z-index: -1; 
} 
 
#shuffle { position: absolute; top: 20px; left: 50%; }

<div id="first"></div> 
<div id="second"></div> 
 
<svg id="line"> 
    <line x1="0" y1="0" x2="200" y2="200" /> 
</svg> 
 
<button id="shuffle">Сместить</button>

<svg width="200" height="200"> 
<line x1="50" y1="50" x2="80" y2="80" stroke="black" stroke-width="5" /> 
<line x1="31.5" y1="55" x2="31.5" y2="75" stroke="black" stroke-width="5" /> 
<rect x="5" y="5" width="50" height="50" fill="white" stroke="black" stroke-width="4"/> 
<rect x="75" y="75" width="50" height="50" fill="white" stroke="black" stroke-width="4"/> 
<rect x="5" y="75" width="50" height="50" fill="white" stroke="black" stroke-width="4"/> 
</svg>