Плавность заливки на свг?

Question

[Zombie42679]

Ребята, Хэлп ! Как реализовать плавную заливку свгшки при клике на кнопку
Вот пример, справа квадрат для примера, так же хочу чтоб было с свгшкой, но не знаю как это реализовать.
https://jsfiddle.net/tsk2k9m6/16/

Пробовал разбить свгшку на 2 части и поиграться с оверфлоу хидден и позиционированием, но толку мало:
https://jsfiddle.net/drs45oav/20/

Answer 1

[Anna_BS]

svg mask
попробовать анимировать градиент

Comments

[Zombie42679]

Была анимация градиента, но как сделать так,, чтобы она начиналась при клике на кнопку?? Вот в чем проблема.

[Anna_BS]

Zombie42679, использовать gradientTransform на клик https://codepen.io/MAW/pen/MwbRoL
или при клике давать класс и для него прописывать новый fill с анимацией для svg