<div class="container">

<div class="node">
    <div class="desc">Node</div>
    <div class="link down">
        <div class="wrap">
            <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                <path stroke-width="4px"/>
            </svg>
            <div class="tooltip">link</div>
            <div class="node">
              <div class="desc">Node</div>
                <div class="link up">
                    <div class="wrap">
                        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path stroke-width="6px"/>
                        </svg>
                        <div class="tooltip">Link</div>
                    </div>
                    <div class="wrap">
                        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path stroke-width="2px"/>
                        </svg>
                        <div class="tooltip">Link</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrap">
            <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                <path stroke-width="1px"/>
            </svg>

            <div class="tooltip">Link</div>
            <div class="node">
                <div class="desc">Node</div>
                <div class="link down">
                    <div class="wrap">
                        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path stroke-width="10px"/>
                        </svg>
                        <div class="tooltip">Link</div>
                    </div>

                    <div class="wrap">
                        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path stroke-width="1px"/>
                        </svg>
                        <div class="tooltip">Link</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</div>

body{
    font-family: "Helvetica";
    font-size: 12px;
    background: #131617;
}

.container {
    position: absolute;
    margin: 100px;
}

path {
    fill: transparent;
    stroke: #03A9F4;
    vector-effect: non-scaling-stroke;
    opacity: .4;
}

.wrap:hover {
  path{
      stroke-dasharray: 10%, 2px;
      stroke-dashoffset: 55%;
      transition: all 0.5s;
      animation: animate 5s cubic-bezier(0.43, 0.11, 0.46, 0.73) infinite;
      opacity: .9;
  }

  .desc{
    background: #E91E63;
  }

  .repeat{
    opacity: .9;
  }
}

@keyframes animate {
  to{
    stroke-dashoffset: 0%; 
  }
}

svg{
  overflow: visible;
  mix-blend-mode: difference;
  height: 100%;
  width: 100%;
}


.up > .wrap > svg ~ session-flow > .node {
    top:0;
}

.down > .wrap > svg ~ session-flow > .node {
    bottom:0;
}

/* funzione che aumenta l'altezza dei link, fino a 50 child, in funzione del loro posizionamento. */
.accoda-loop (@i) when (@i < 50) {

    .up > .wrap:nth-child(@{i}),
    .down > .wrap:nth-child(@{i}) {
      height: @i*100%;
      z-index: [email protected];
    }

    .accoda-loop(@i + 1);
}

.accoda-loop(1);

.wrap{
  position: absolute;
}

.down > .wrap{
  top: 0;
}

.up > .wrap{
  bottom: 0;
}


.node{
  right: 0;
  position: absolute;
}

.node > .desc {
    background: #424242;
    color: white;
    position: absolute;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 2;
    white-space: nowrap;

}

.node > .repeat{
    position: absolute;
    bottom: -30px;
    left: 0;
    opacity: .2;
    width: 50px;
    height: 30px;
    border: 3px solid #03A9F4;
    transform: translate(-50%, 0%);
    box-sizing: border-box;
    border-radius: 50%;

    &:after{
      content: "";
      position: absolute;
      top: 5px;
      left: -8px;
      transform: rotate(-18deg);
      border-style: solid;
      border-width: 0px 6px 10px 6px;
      border-color: transparent transparent #03A9F4 transparent;
    }

    span{
      position: absolute;
      bottom: -15px;
      right: 50%;
      transform: translate(50%, 50%);
      font-size: smaller;
      background: #eaeaea;
      padding: 3px 5px;
      color: #607D8B;
    }
}


.wrap .tooltip{
    opacity: 0;
    font-size: smaller;
    background: #eaeaea;
    padding: 3px 5px;
    color: #607D8B;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%,-50%);
}

.wrap:hover .tooltip{
    animation: compare .6s .1s cubic-bezier(0.58, -0.46, 0.65, 1.89) forwards;
}

  @keyframes compare{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

.up > .wrap:after{
  top: 0;
  transform: translate(50%,-50%);
}
.down > .wrap:after{
  bottom: 0;
  transform: translate(50%, 50%);
}

.wrap:after{
    content: "";
    width: 10px;
    height: 10px;
    right: 0;
    transform: translate(50%, 50%);
    display: block;
    position: absolute;
    background: #6c98ad;
}

.down > session-flow .node {
  bottom: 0px;
}

.up > session-flow .node {
  top: 0px;
}


.link.up {
    bottom: 0;
}

.link.down {
    top: 0;
}


.link{ 
    position: absolute;
    height: 80px;
    width: 200px;
}

.link.up > .wrap > svg path {
    d: path("M0,100 C50,100 50,0 100,0");
}

.link.down > .wrap > svg path {
    d: path("M0,0 C50,0 50,100 100,100");
}