# SVG line rise animation from beginning to end

Good day. Tell me please. Why does the growth of the line occur separately after each coordinate, which is given by M. Ie on different floors of the entire curve, the lines crawl simultaneously at the same time. But it is necessary that the entire curve grows as one.

`<svg xmlns="http://www.w3.org/2000/svg" width="1170" height="3650"><path d="M150 200 H 1000 Q 1150 200 1150 350 M150 200 H 1000 Q 1150 200 1150 350 M150 200 H 1000 Q 1150 200 1150 350 M1150 350 Q 1150 500 1000 500 H 150 Q 0 500 0 650 M1150 350 Q 1150 500 1000 500 H 150 Q 0 500 0 650 M1150 350 Q 1150 500 1000 500 H 150 Q 0 500 0 650 M0 650 Q 0 800 150 800 H 1000 Q 1150 800 1150 950 M0 650 Q 0 800 150 800 H 1000 Q 1150 800 1150 950 M0 650 Q 0 800 150 800 H 1000 Q 1150 800 1150 950 M1150 950 Q 1150 1100 1000 1100 H 150 Q 0 1100 0 1250 M1150 950 Q 1150 1100 1000 1100 H 150 Q 0 1100 0 1250 M1150 950 Q 1150 1100 1000 1100 H 150 Q 0 1100 0 1250 M0 1250 Q 0 1400 150 1400 H 1000 Q 1150 1400 1150 1550 M0 1250 Q 0 1400 150 1400 H 1000 Q 1150 1400 1150 1550 M0 1250 Q 0 1400 150 1400 H 1000 Q 1150 1400 1150 1550 M1150 1550 Q 1150 1700 1000 1700 H 150 Q 0 1700 0 1850 M1150 1550 Q 1150 1700 1000 1700 H 150 Q 0 1700 0 1850 M1150 1550 Q 1150 1700 1000 1700 H 150 Q 0 1700 0 1850 M0 1850 Q 0 2000 150 2000 H 1000 Q 1150 2000 1150 2150 M0 1850 Q 0 2000 150 2000 H 1000 Q 1150 2000 1150 2150 M0 1850 Q 0 2000 150 2000 H 1000 Q 1150 2000 1150 2150 M1150 2150 Q 1150 2300 1000 2300 H 150 Q 0 2300 0 2450 M1150 2150 Q 1150 2300 1000 2300 H 150 Q 0 2300 0 2450 M1150 2150 Q 1150 2300 1000 2300 H 150 Q 0 2300 0 2450 M0 2450 Q 0 2600 150 2600 H 1000 Q 1150 2600 1150 2750 M0 2450 Q 0 2600 150 2600 H 1000 Q 1150 2600 1150 2750 M0 2450 Q 0 2600 150 2600 H 1000 Q 1150 2600 1150 2750 M1150 2750 Q 1150 2900 1000 2900 H 150 Q 0 2900 0 3050 M1150 2750 Q 1150 2900 1000 2900 H 150 Q 0 2900 0 3050 M1150 2750 Q 1150 2900 1000 2900 H 150 Q 0 2900 0 3050 M0 3050 Q 0 3200 150 3200 H 1000 Q 1150 3200 1150 3350 M0 3050 Q 0 3200 150 3200 H 1000 Q 1150 3200 1150 3350 M0 3050 Q 0 3200 150 3200 H 1000 Q 1150 3200 1150 3350 M1150 3350 Q 1150 3500 1000 3500 H 150 Q 0 3500 0 3650 M1150 3350 Q 1150 3500 1000 3500 H 150 Q 0 3500 0 3650 M1150 3350 Q 1150 3500 1000 3500 H 150 Q 0 3500 0 3650 " fill="transparent" stroke="lightgrey" stroke-dasharray="2000" stroke-dashoffset="2000" class="anim-line"></path></svg>`

```
.anim-line {
animation: dash 3s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
```