Lines from div follows another specific div

Question

I need help of making lines follows another specific div. I have five circle1, circle2, circle3, circle4, circle5 and four lines, and the four lines follows the div circle5, something like this:

This is how the code look like

<div class="circle1"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle2"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle3"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle4"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle5"></div>

How do I achieve this with css or JS?

Answer 1

You can implement the above design using CSS pseudo elements along with some absolute positioning. Here is an rough example on how it can be achieved using CSS.

 .circle { width: 35px; height: 35px; background-color: blue; position: relative; border-radius: 50%; } .circle:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) rotate(-30deg); transform-origin: 0% 0%; width: 1px; height: 100px; background-color: blue; } 

  <div class="circle"></div>