What is the best way to implement timeline?

Question

JavaScript

Hello. I'm making SVG Timeline, but due to insufficient knowledge of svg, I can't solve one problem.

Task: It is
necessary that when hovering over a certain group, for example the fourth, the path of the third (and further previous) groups fills the gray line. I tried to implement the rotation of the path through css transform, but it turns out a lot of code and not beautiful. Perhaps there is a simpler solution, for example, through js or creating an svg mask. Who will advise what? I would appreciate a solution.

Answer 1

Isn't it easier to make a gray line initially with segments and just paint them?
But you can still try to make a gradient and apply it to the entire line.