Как изменить по событию hover , path в svg?

Собственно сам вопрос в заголовке

Имеется такой hexagon а svg и в соответствии с макетом на нём должен произойти hover и по этому событию должно произойти увеличение тёмного элемента, я всё сделал за исключением hover
Как мне раньше объясняли что должно быть одинаковое ко-во точек и именно это условие я предусмотрел ..
Как в этом случае сделать так что бы было как во втором hexagon ?

Ответ

#pouring { transition: 1s; } #hexagon:hover #pouring { d: path("m 85.620408,182.81115 0.753717,-46.40922 46.976195,-22.64163 46.22247,23.76759 -0.75372,46.40922 -46.97619,22.64164 z"); d: "m 85.620408,182.81115 0.753717,-46.40922 46.976195,-22.64163 46.22247,23.76759 -0.75372,46.40922 -46.97619,22.64164 z"; transform: translate(-55px, -17px); }