<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="992.13px" height="634px" viewBox="0 0 992.13 634" enable-background="new 0 0 992.13 634" xml:space="preserve">   
      <text class="line6-link" font-size="25px" y="225" x="28" fill="red">
      <a xlink:href="#">LINK-for-line 6</a>
   </text>
<path class="chart-line" id="line6" fill="none" stroke="#119FDB" stroke-width="70" stroke-miterlimit="10" d="M273.275,201.759
  C317.968,129.484,397.032,80.71,487.656,78.247"/>
<path class="chart-line" id="line5" fill="none" stroke="#119FDB" stroke-width="55" stroke-miterlimit="10" d="M265.755,462.251
  c-19.925-36.809-31.238-78.962-31.238-123.757c0-45.656,11.753-88.567,32.398-125.873"/>
<path class="chart-line" id="line4" fill="none" stroke="#119FDB" stroke-width="45" stroke-miterlimit="10" d="M488.53,598.764
  c-91.905-2.193-172.017-52.015-216.599-125.728"/>
<path class="chart-line" id="line3" fill="none" stroke="#119FDB" stroke-width="35" stroke-miterlimit="10" d="M717.299,473.849
  c-44.765,73.407-124.842,122.918-216.63,124.927"/>
<path class="chart-line" id="line2" fill="none" stroke="#119FDB" stroke-width="25" stroke-miterlimit="10" d="M723.072,213.097
  c20.482,37.195,32.135,79.935,32.135,125.397c0,45.117-11.477,87.553-31.668,124.55"/>
<path class="chart-line" id="line1" fill="none" stroke="#119FDB" stroke-width="12" stroke-miterlimit="10" d="M500.123,78.202
  c91.867,1.821,172.064,51.226,216.958,124.583"/>
</svg>
 .chart-line {
   stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: offset 1.5s linear 1s forwards;
  }
  @keyframes offset {
  100% {stroke-dashoffset:0;}
  }
  .line6-link:hover + #line6 {
  stroke-width: 100px;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.