Drawing curved lines to connect elements on web pa

Question

I have been tasked with turning this rough idea into a live page.

While I have a basic structure established, I am wondering the best way to go about creating the curved lines that connect the months.

Should I just create images and over lay them? Is there a way to draw them with some kind of scripting/coding? Canvas?

I don't know the best way to do this.

Answer 1

I just put this together to show you that it is very possible and there are probably other ways to do it.

#upper-line {
    border: solid 1px #000;
    width:80%;
    height: 250px;
    border-radius: 50%;
   left:55px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    position: absolute;
    top: 100px;
}

#lower-line {
    border: solid 1px #000;
    width: 80%;
    height: 250px;
    border-radius: 50%;
    top: 340px;
    left: -60px;
    border-left: none;
    border-top: none;
    border-bottom: none;
    position: absolute
}

#content-1 {
    position: absolute;
   left: 180px;
    top: 75px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: orange;
}

#content-2 {
    position: absolute;
   left: 40px;
    top: 200px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #98879A;
}

#content-3 {
    position: absolute;
   left: 400px;
    top: 400px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #637DBA;
}

<div id="upper-line"></div>

<div id="lower-line"></div>

<div id="content-1">content 1</div>

<div id="content-2">content 2</div>

<div id="content-3">content 3</div>

Note: This is just an example, you have to put in a little work to get it to work for you. The code could be even cleaner.

See how it works on fiddle

Answer 2

You should try SVG.

JsPlumb its a great library to make connections between elements.

http://jsplumb.org