<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.