How to make svg animation work properly?

Question

JavaScript

There is this code https://jsfiddle.net/57s1rw1x/
An animation starts when the mouse moves. I would like the drawing to take place from the center of the y-axis and draw from the top point.
Look at the link, it will be clear.
Moreover, some correctly stretch from the middle to the edges, and some segments seem to fall down. Can't figure out why

Answer 1

I did this: instead of rect, I used path and just changed to a new path, for animation, just a transition in css

Answer 2

Such things are better done with css, and in your case you just need to specify the translate coordinates, then everything will work.

Answer 3

У вас отрисовка идет от значения смещения по оси Y до значения высоты. Если вы хотите, чтобы смещение шло от центра, то начальный Y должен быть центром оси, а вы его меняете каждый раз на случайное значение.