How can I make a curve line to join two node in HTML and CSS?

Question

I have two div and I want to connect them using a curve graph. Any idea how can I achieve that? if you run the below-mentioned code you see there is tag named "Command Sequence Starting". and two divs W_SCMadl_refresh and WIN64_MCCMon respectively, now I wanna connect with this two div using a curve line to the "Command Sequence Starting"

.mv-thread,
.mv-sequence {
  display: inline-block;
}

.mv-sequence,
.mv-subsequence {
  border: solid 1px #e0e0e0;
  border-radius: 15px;
  margin: 85px;
  padding: 10px;
  text-align: center;
}

.mv-sequence>.title,
.mv-subsequence>.title {
  font-size: 17px;
  background-color: cadetblue;
  border-radius: 7px 0px;
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

.mv-sequence>.body,
.mv-subsequence>.body {
  min-width: max-content;
  display: inline-block;
  text-align: left;
}

.mv-command>div.indicator {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  text-align: center;
  font-size: 17px;
}

.mv-command>span {
  font-size: 13px;
  font-weight: bold;
}

.mv-command:before {
  content: "";
  background-color: #000;
  width: 3px;
  height: 16px;
  display: block;
  margin-left: 14px;
}


/* for done*/

.mv-command.done:before {
  background: #477738;
}

.mv-cmd-done {
  background: #57b847;
}

.mv-cmd-done>a>span,
.mv-command.done>span {
  color: #477738;
}


/* for aborted*/

.mv-command.aborted:before {
  background: #844138;
}

.mv-cmd-aborted {
  background: #ea4f37;
}

.mv-cmd-aborted>a>span,
.mv-command.aborted>span {
  color: #844138;
}


/* for waiting*/

.mv-command.waiting:before {
  background-color: #808080;
}

.mv-cmd-waiting {
  background: #f1f1f1;
}

.mv-cmd-waiting>span,
.mv-command.waiting>span {
  color: #808080;
}


/* for disabled*/

.mv-command.disabled:before {
  background: #80808080;
}

.mv-cmd-disabled {
  border: 1px solid #80808080;
}

.mv-cmd-disabled>span,
.mv-command.disabled>span {
  color: #80808080;
}


/* for running */

.mv-command.running:before {
  background: #005686;
}

.mv-cmd-running {
  border: 1px solid #005686;
}

.mv-cmd-running>a>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    color: #fff;
  }
  to {
    color: #368ec4;
  }
}

.mv-command.running>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>ReleaseWork</title>
</head>

<body>
  <div>
    <div class="mv-sequence">
      <div class="body">
        <div class="mv-thread">
          <table style="width:100%">
            <span class="mv-sequence" style="background-color: green; color: aliceblue;">Command Sequence Starting</span>
            <tbody>
              <tr>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div>
                        <div class="body">
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">[ScmRefresh]</span>
                            <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_SCMadl_refresh</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_photo</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_photo</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">code:[ScmCollect]
        -cr_later</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_collect_cr</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect_cr</span>
                          </div>
                          <div>
                            <div class="body">
                              <div class="mv-command aborted">
                                <span style="display:none" class="cmd-text">[ScmSync]</span>
                                <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span
        class="fonticon fonticon-wrong"></span></a></div>
                                <span>W_adl_sync</span>
                              </div>
                              <div class="mv-command waiting">
                                <span style="display:none" class="cmd-text">[ScmAttach]
        -attached_fw_mod</span>
                                <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                <span>W_adl_attach</span>
                              </div>
                            </div>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">adl_publish</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_publish</span>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">code:[ScmDsWs]
        [workspace]</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_ds_ws</span>
                          </div>
                        </div>
                      </div>
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div>
                                  <div class="body">
                                    <div>
                                      <div class="body">
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">if not exist
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] mkdir
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir]</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_Shared_Preq_mkdir</span>
                                        </div>
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">mkCopyPreq -W
        [WIN64_DRIVE]\[WIN64_DIR] -p [WIN_PREQ_DIR] -t
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] -d -o win_b64  -retry 10 -time 30
        -copyretry 10 -copytime 30</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_mkCopyPreq</span>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="mv-thread">
                                      <table style="width:100%">
                                        <tbody>
                                          <tr>
                                            <td style="vertical-align: top;">
                                              <div>
                                                <div class="body"></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div class="mv-command
            done">
                                  <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span
        class="fonticon fonticon-check"></span></a></div>
                                  <span>WIN64_MCCMon</span>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

This is the kind of thing I'd like:

I don't really see a good way except maybe by using a bezier curve using Canvas. https://www.w3schools.com/Tags/canvas_beziercurveto.asp — Thomas van den Bulk, Nov 04 '20 at 11:16
Can you draw the expected output? how do you want the curve to look? — Matt Ellen, Nov 04 '20 at 11:30
@MattEllen please refer to the image, if you can help me it would be really helpful - https://imgur.com/a/xa2RXTG — thelonelyCoder, Nov 04 '20 at 11:41
Have you try to use absolute pseudos with radius and border ? . should not be difficult to find tags to generates then since you use a table ;) — G-Cyrillus, Nov 04 '20 at 13:04
I have given solution using HTML and CSS as mention in Question. In accepted answer there is javascript used. @thelonelyCoder you should have to mention to use javascript. — Yuvraj Mule, Nov 06 '20 at 10:58
Hello, @YuvrajMule I really appreciate your efforts, but the and which I accepted is more precise and more clearly defined. — thelonelyCoder, Nov 06 '20 at 11:14

obscure · Accepted Answer · 2020-11-04T14:03:20.033

The browser's ability to display SVGs - and create 'em on the fly - can come in handy in this case. This way you don't have to manually hardcode the lines into the html - you just tell the browser what element's it should connect.

Basically you add an empty HTML <svg> element into the body and make sure it's in the background of the objects you want to connect. This can be done by e.g. setting it's CSS z-index property to a negative value.

Afterwards:

figure out the screen coordinates of the two objects you want to connect
create a svg <path> element, which connects the two coordinates with a line/curve
append that path to the svg

The hard part with this solution though is getting your actual objects! If we take a closer look at your html, we realize you put all labeling of the objects inside <span> elements. That's great because we can simply use

document.getElementsByTagName("span")

to get a HTMLCollection of all the span elements on your site. If we now go further, inspect the .innerText property of the elements inside this collection and compare it to one of the object's textes e.g. W_SCMadl_refresh we can get a reference to the actual object. Unfortunately we aren't really interested in the span element itself since you want to connect the lines with one of it's parent's child DIVs.

Let's inspect those child elements. We can see those are all DIVs again which have a CSS class of indicator mv-cmd-done, indicator mv-cmd-aborted, ...

So to actually get one of those elements we need to search the parent containers children's classNames for the presence of the string indicator like:

element.className.indexOf("indicator") != -1

The only element in your hierachy that ain't got such an element is the top-most Command Sequence Starting - so we need to include an exception.

Everything put together looks a little bit like this (just click on 'Run code snippet'):

let paths = document.getElementById("paths");
let connections2 = [];

function getElement(element) {
  for (let a = 0; a < element.length; a++) {
    if (element[a].className.indexOf("indicator") != -1) {
      return element[a];
    }
  }

  return null;
}

function connectElements(connections) {
  let spans = document.getElementsByTagName("span");
  let start;
  let end;
  let temp;
  for (let a = 0; a < connections.length; a += 2) {
    for (let b = 0; b < spans.length; b++) {
      if (spans[b].innerText == connections[a]) {
        start = getElement(spans[b].parentElement.children);
      }
      if (spans[b].innerText == connections[a + 1]) {
        if (connections[a + 1] == "Command Sequence Starting") {
          end = spans[b];
        } else {
          end = getElement(spans[b].parentElement.children);
        }
      }
    }
    connections2.push({
      start: start,
      end: end
    });
  }
  coordinates();
}

function coordinates() {
  let padding = 5;
  let bezierWeight = 0.5;
  let oldPaths = paths.children;
  for (let a = oldPaths.length - 1; a >= 0; a--) {
    paths.removeChild(oldPaths[a]);
  }

  let x1, y1, x4, y4, dx, x2, x3, path, start, end;

  for (let a = 0; a < connections2.length; a++) {
    start = $(connections2[a].start);
    end = $(connections2[a].end);

    x1 = start.offset().left + start.width() / 2 - padding;
    y1 = start.offset().top + start.height() / 2 - padding;
    x4 = end.offset().left + start.width() / 2 - padding;
    y4 = end.offset().top + start.height() / 2 - padding;
    dx = Math.abs(x4 - x1) * bezierWeight;

    if (x4 < x1) {
      x2 = x1 - dx;
      x3 = x4 + dx;
    } else {
      x2 = x1 + dx;
      x3 = x4 - dx;
    }

    data = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;

    path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", data);
    path.setAttribute("class", "path");
    paths.appendChild(path);
  }
}

connectElements(["W_SCMadl_refresh", "Command Sequence Starting", "WIN64_MCCMon", "Command Sequence Starting", "W64_mkCopyPreq", "WIN64_MCCMon"]);

#paths {
  z-index: -1;
  position: absolute;
}

.path {
  fill: none;
  stroke: #3ed21b;
  stroke-width: 6;
}

.mv-thread,
.mv-sequence {
  display: inline-block;
}

.mv-sequence,
.mv-subsequence {
  border: solid 1px #e0e0e0;
  border-radius: 15px;
  margin: 85px;
  padding: 10px;
  text-align: center;
}

.mv-sequence>.title,
.mv-subsequence>.title {
  font-size: 17px;
  background-color: cadetblue;
  border-radius: 7px 0px;
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

.mv-sequence>.body,
.mv-subsequence>.body {
  min-width: max-content;
  display: inline-block;
  text-align: left;
}

.mv-command>div.indicator {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  text-align: center;
  font-size: 17px;
}

.mv-command>span {
  font-size: 13px;
  font-weight: bold;
}

.mv-command:before {
  content: "";
  background-color: #000;
  width: 3px;
  height: 16px;
  display: block;
  margin-left: 14px;
}


/* for done*/

.mv-command.done:before {
  background: #477738;
}

.mv-cmd-done {
  background: #57b847;
}

.mv-cmd-done>a>span,
.mv-command.done>span {
  color: #477738;
}


/* for aborted*/

.mv-command.aborted:before {
  background: #844138;
}

.mv-cmd-aborted {
  background: #ea4f37;
}

.mv-cmd-aborted>a>span,
.mv-command.aborted>span {
  color: #844138;
}


/* for waiting*/

.mv-command.waiting:before {
  background-color: #808080;
}

.mv-cmd-waiting {
  background: #f1f1f1;
}

.mv-cmd-waiting>span,
.mv-command.waiting>span {
  color: #808080;
}


/* for disabled*/

.mv-command.disabled:before {
  background: #80808080;
}

.mv-cmd-disabled {
  border: 1px solid #80808080;
}

.mv-cmd-disabled>span,
.mv-command.disabled>span {
  color: #80808080;
}


/* for running */

.mv-command.running:before {
  background: #005686;
}

.mv-cmd-running {
  border: 1px solid #005686;
}

.mv-cmd-running>a>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    color: #fff;
  }
  to {
    color: #368ec4;
  }
}

.mv-command.running>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<svg height="1000" width="1000" id="paths">
</svg>
<div>
  <div class="mv-sequence">
    <div class="body">
      <div class="mv-thread">
        <table style="width:100%">
          <span class="mv-sequence" style="background-color: green; color: aliceblue;">Command Sequence Starting</span>
          <tbody>
            <tr>
              <td style="vertical-align: top;">
                <div>
                  <div class="body">
                    <div>
                      <div class="body">
                        <div class="mv-command done">
                          <span style="display:none" class="cmd-text">[ScmRefresh]</span>
                          <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                          <span>W_SCMadl_refresh</span>
                        </div>
                        <div class="mv-command done">
                          <span style="display:none" class="cmd-text">adl_photo</span>
                          <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                          <span>W_adl_photo</span>
                        </div>
                        <div class="mv-command done">
                          <span style="display:none" class="cmd-text">code:[ScmCollect]
        -cr_later</span>
                          <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                          <span>W_adl_collect</span>
                        </div>
                        <div class="mv-command done">
                          <span style="display:none" class="cmd-text">adl_collect_cr</span>
                          <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                          <span>W_adl_collect_cr</span>
                        </div>
                        <div>
                          <div class="body">
                            <div class="mv-command aborted">
                              <span style="display:none" class="cmd-text">[ScmSync]</span>
                              <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span
        class="fonticon fonticon-wrong"></span></a></div>
                              <span>W_adl_sync</span>
                            </div>
                            <div class="mv-command waiting">
                              <span style="display:none" class="cmd-text">[ScmAttach]
        -attached_fw_mod</span>
                              <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                              <span>W_adl_attach</span>
                            </div>
                          </div>
                        </div>
                        <div class="mv-command waiting">
                          <span style="display:none" class="cmd-text">adl_publish</span>
                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                          <span>W_adl_publish</span>
                        </div>
                        <div class="mv-command waiting">
                          <span style="display:none" class="cmd-text">code:[ScmDsWs]
        [workspace]</span>
                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                          <span>W_adl_ds_ws</span>
                        </div>
                      </div>
                    </div>
                    <div class="mv-thread">
                      <table style="width:100%">
                        <tbody>
                          <tr>
                            <td style="vertical-align: top;">
                              <div>
                                <div class="body">
                                  <div>
                                    <div class="body">
                                      <div class="mv-command waiting">
                                        <span style="display:none" class="cmd-text">if not exist
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] mkdir
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir]</span>
                                        <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                        <span>W64_Shared_Preq_mkdir</span>
                                      </div>
                                      <div class="mv-command waiting">
                                        <span style="display:none" class="cmd-text">mkCopyPreq -W
        [WIN64_DRIVE]\[WIN64_DIR] -p [WIN_PREQ_DIR] -t
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] -d -o win_b64  -retry 10 -time 30
        -copyretry 10 -copytime 30</span>
                                        <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                        <span>W64_mkCopyPreq</span>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="mv-thread">
                                    <table style="width:100%">
                                      <tbody>
                                        <tr>
                                          <td style="vertical-align: top;">
                                            <div>
                                              <div class="body"></div>
                                            </div>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
              <td style="vertical-align: top;">
                <div>
                  <div class="body">
                    <div class="mv-thread">
                      <table style="width:100%">
                        <tbody>
                          <tr>
                            <td style="vertical-align: top;">
                              <div class="mv-command
            done">
                                <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span
        class="fonticon fonticon-check"></span></a></div>
                                <span>WIN64_MCCMon</span>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

As you can see there's a simple and handy connectElements() function which accepts an array of strings as a parameter. This strings are the text labels of the objects you want to connect. e.g. W_SCMadl_refresh and Command Sequence Starting

connectElements(["W_SCMadl_refresh", "Command Sequence Starting"]);

Really thanks a lot man....you are really a genius greatly explained @obscure — thelonelyCoder, Nov 05 '20 at 04:50

Yuvraj Mule · Answer 2 · 2020-11-04T13:40:00.050

  .mv-thread,
.mv-sequence {
  display: inline-block;
}

.mv-sequence,
.mv-subsequence {
  border: solid 1px #e0e0e0;
  border-radius: 15px;
  margin: 85px;
  padding: 10px;
  text-align: center;
}

.mv-sequence>.title,
.mv-subsequence>.title {
  font-size: 17px;
  background-color: cadetblue;
  border-radius: 7px 0px;
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

.mv-sequence>.body,
.mv-subsequence>.body {
  min-width: max-content;
  display: inline-block;
  text-align: left;
}

.mv-command>div.indicator {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  text-align: center;
  font-size: 17px;
}

.mv-command>span {
  font-size: 13px;
  font-weight: bold;
}

.mv-command:before {
  content: "";
  background-color: #000;
  width: 3px;
  height: 16px;
  display: block;
  margin-left: 14px;
}


/* for done*/

.mv-command.done:before {
  background: #477738;
}

.mv-cmd-done {
  background: #57b847;
}

.mv-cmd-done>a>span,
.mv-command.done>span {
  color: #477738;
}


/* for aborted*/

.mv-command.aborted:before {
  background: #844138;
}

.mv-cmd-aborted {
  background: #ea4f37;
}

.mv-cmd-aborted>a>span,
.mv-command.aborted>span {
  color: #844138;
}


/* for waiting*/

.mv-command.waiting:before {
  background-color: #808080;
}

.mv-cmd-waiting {
  background: #f1f1f1;
}

.mv-cmd-waiting>span,
.mv-command.waiting>span {
  color: #808080;
}


/* for disabled*/

.mv-command.disabled:before {
  background: #80808080;
}

.mv-cmd-disabled {
  border: 1px solid #80808080;
}

.mv-cmd-disabled>span,
.mv-command.disabled>span {
  color: #80808080;
}


/* for running */

.mv-command.running:before {
  background: #005686;
}

.mv-cmd-running {
  border: 1px solid #005686;
}

.mv-cmd-running>a>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    color: #fff;
  }
  to {
    color: #368ec4;
  }
}

.mv-command.running>span {
  color: #80808080;
  animation: mymove 2s infinite;
}
.vLine{
 background: gray; border: 1px solid gray; border-image: none; left: 100px; top: 38px; width: 1px; height: 50px; position: absolute;
}
.div1{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 17px; 
top: 148px; 
width: 212px; 
height: 100px; 
position: 
absolute; clip: rect(0px, 100px, 70px, 0px);
}
.div2{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 16px; 
top: 148px; 
width: 212px; 
height: 100px; 
position: 
absolute; clip: rect(0px, 264px, 70px, 180px);
}
.div3{
border-radius: 30px; 
border: 3px solid gray; 
border-image: none; 
left: 60px; 
top: 95px; 
width: 100px; 
height: 50px; 
position: 
absolute; clip: rect(30px, 264px, 100px, 50px);
}
.div4{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 162px; 
top: 95px; 
width: 100px; 
height: 50px; 
position: 
absolute; clip: rect(30px, 40px, 100px, 0px);
}
.div5{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 0px; 
top: 222px; 
width: 230px; 
height: 490px; 
position: absolute; 
clip: rect(40px, 450px, 500px, 40px);
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>ReleaseWork</title>

</head>

<body>
  <div>
    <div class="mv-sequence">
      <div class="body">
        <div class="mv-thread" style="position:relative" >
          <table style="width:100%">
          
            <span class="mv-sequence" style="background-color: green; color: aliceblue; position:relative">Command Sequence Starting

            </span>
            
            <tbody>
              <tr>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div>
                        <div class="body">
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">[ScmRefresh]</span>
                            <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_SCMadl_refresh</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_photo</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_photo</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">code:[ScmCollect]
        -cr_later</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_collect_cr</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect_cr</span>
                          </div>
                          <div>
                            <div class="body">
                              <div class="mv-command aborted">
                                <span style="display:none" class="cmd-text">[ScmSync]</span>
                                <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span
        class="fonticon fonticon-wrong"></span></a></div>
                                <span>W_adl_sync</span>
                              </div>
                              <div class="mv-command waiting">
                                <span style="display:none" class="cmd-text">[ScmAttach]
        -attached_fw_mod</span>
                                <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                <span>W_adl_attach</span>
                              </div>
                            </div>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">adl_publish</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_publish</span>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">code:[ScmDsWs]
        [workspace]</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_ds_ws</span>
                          </div>
                        </div>
                      </div>
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div>
                                  <div class="body">
                                    <div>
                                      <div class="body">
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">if not exist
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] mkdir
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir]</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_Shared_Preq_mkdir</span>
                                        </div>
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">mkCopyPreq -W
        [WIN64_DRIVE]\[WIN64_DIR] -p [WIN_PREQ_DIR] -t
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] -d -o win_b64  -retry 10 -time 30
        -copyretry 10 -copytime 30</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_mkCopyPreq</span>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="mv-thread">
                                      <table style="width:100%">
                                        <tbody>
                                          <tr>
                                            <td style="vertical-align: top;">
                                              <div>
                                                <div class="body"></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div class="mv-command
            done">
                                  <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span
        class="fonticon fonticon-check"></span></a></div>
                                  <span>WIN64_MCCMon</span>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
         <div class="div1"></div>
         <div class="div2"></div>
         <div class="div3"></div>
         <div class="div4"></div>
     <div class="div5"></div>
        </div>
        
      </div>
    </div>
  </div>
</body>

</html>

Can you please make sure that the curve lines are coming from the "Command Sequence Starting" @Yuvraj — thelonelyCoder, Nov 04 '20 at 12:46
This would be a really good answer if you said *what* you'd done and *how* it works. Code dumps aren't useful answers. — T.J. Crowder, Nov 04 '20 at 12:58
@ShankhadeepBhadra I've update code plz check. And Accept as answer if helpful. — Yuvraj Mule, Nov 04 '20 at 13:40
Always welcome @ShankhadeepBhadra with interesting questions. Plz accept my answer if its helpful to you. Thanks. — Yuvraj Mule, Nov 05 '20 at 07:33

How can I make a curve line to join two node in HTML and CSS?

2 Answers2

Linked