How to animate drawing of svg line from point to point?

Question

css

Help me figure it out, or poke into a good tutorial on svg animation.
There is svg . Task:
The line is not initially visible. When you hover over a point, the line comes out of it and is drawn to the end.

So far it turned out like this codepen

Answer 1

To do this you will need the morphSVG plugin, with it you can transform your svg however you want. In your case, so that the line first goes to the bottom, then to the side.
That is, your d will change like this:
initial state: d="M272.2.3"
state 2: d="M272.2.3l-61 93"
state 3: d="M272.2.3l-61 93H0"