title: Drawing connective elements between fixed positions on several html elements
body: <p>I am quite new to web programming, so please bear with me if I am missing something obvious. I am using html, css and javascript to visualize different DNA sequences. Each sequence is represented as a graph of html elements and has a fixed length corresponding to the length of the DNA sequence. Spans are positioned at fixed points in each graph to represent certain motifs. The code for one such graph looks like this (using django as my web framework):</p>
  
  <pre><code>&lt;div class="graph" style='--graph-length: {{sequence_length}}'&gt;
          &lt;hr class="line"&gt;
        {% for key, value2 in value.items %}
          {% if value2.start_position %}
              &lt;span class='motif' style="--start: {{ value2.start_position }}; --stop: {{ value2.stop_position }};"&gt;&lt;/span&gt;
          {% endif %}
        {% endfor %}
        &lt;/div&gt;
  </code></pre>
  
  <p>Like this, I create representations of several sequences on my webpage, one below the other. Now some of these sequences may be similar to one another. I want to graphically display the regions over which a sequence is similar to the one displayed below it, like this:
  <a href="https://i.stack.imgur.com/BUs0y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BUs0y.jpg" alt="enter image description here"></a></p>
  
  <p>In the above example, the sequences represented by graph1 and 2 and graph2 and 3 have a similar region, but the total length of the sequences (and thus the displayed size of motifs represented on a graph) differs, resulting in the wider blue element between graph2 and 3.</p>
  
  <p>So what I have for each graph are the sequence length each graph should represent, the start and end positions for each motif on the respective graph, and the start and end position for the similar region on each graph if two graphs (sequences) contain a similar region (green in the picture). </p>
  
  <p>So my question is: How can I create the elements representing a similar region between two graphs (blue in the picture) using html, css or javascript? (Or really anything else that I can implement in what I already have)</p>
  
  <p>Any hints on how I could approach this are apprechiated, let me know if you have more questions!</p>
  
  <p><strong>EDIT:</strong> I would actually prefer a solution in svg, as I think its more suitable for integration in my application</p>