.svg-line1 {
stroke-width: 1;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: svg-line1 5s forwards;
}
.svg-line2 {
stroke-width: 1;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: svg-line2 5s forwards;
}
.svg-line3 {
stroke-width: 1;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: svg-line3 5s forwards;
}
.svg-line4 {
stroke-width: 1;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: svg-line4 5s forwards;
}
@keyframes svg-line1 {
100% {
stroke-dashoffset: 0;
}
}
@keyframes svg-line2 {
100% {
stroke-dashoffset: 0;
}
}
@keyframes svg-line3 {
100% {
stroke-dashoffset: 0;
}
}
@keyframes svg-line4 {
100% {
stroke-dashoffset: 0;
}
}
<svg id="svg" width="618" height="489" viewBox="0 0 618 489" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask1">
<path class="svg-line1" d="M482 125C525 155.5 476 220.5 451 223" stroke="#685ED6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</mask>
<mask id="mask2">
<path class="svg-line2" d="M72 98.5C12.5 165.833 -21.3998 284.8 19.0002 360C69.5002 454 167 462 330 474.5" stroke="#18E1F7" stroke-linecap="round" fill="none" stroke-linejoin="round"/>
</mask>
<mask id="mask3">
<path class="svg-line3" d="M440.5 97.5C426.833 91.3333 408.7 82.4 405.5 64C402.3 45.6 437 13.5 412 1" stroke="#685ED6" stroke-linecap="round" fill="none" stroke-linejoin="round"/>
</mask>
<mask id="mask4">
<path class="svg-line4" d="M435.5 475.5C503 492 617.5 504.5 617.5 422.5C617.5 335.43 583 338 561 208" stroke="#18E1F7" stroke-linecap="round" fill="none" stroke-linejoin="round"/>
</mask>
</defs>
<path mask="url(#mask1)" fill="none" d="M482 125C525 155.5 476 220.5 451 223" stroke="#685ED6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 7"/>
<path mask="url(#mask2)" fill="none" d="M72 98.5C12.5 165.833 -21.3998 284.8 19.0002 360C69.5002 454 167 462 330 474.5" stroke="#18E1F7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 7"/>
<path mask="url(#mask3)" fill="none" d="M440.5 97.5C426.833 91.3333 408.7 82.4 405.5 64C402.3 45.6 437 13.5 412 1" stroke="#685ED6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 7"/>
<path mask="url(#mask4)" fill="none" d="M435.5 475.5C503 492 617.5 504.5 617.5 422.5C617.5 335.43 583 338 561 208" stroke="#18E1F7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 7"/>
</svg>