Start SVG animation on click, how to do?

Question

JavaScript

In general, there is such an animation
https://jsfiddle.net/RadCor/ffjdaa58/
It starts immediately when the page is loaded.

I need to make it run when the blue background is clicked.
I tried to do this:
https://jsfiddle.net/RadCor/ffjdaa58/1/
Now the animation starts on click, but there was another problem.

In the first option, when loading, all animation components are launched simultaneously.
And in the second variant, the script runs them one by one, which is why at the beginning the background is darkened and then with a delay of 4.8s, then the line is drawn and according to the list.

How can I make all the components run at the same time (in the first example) and not one after another when clicked?

Answer 1

So?