Максим

В принципе не сложный эффект:

там картинка в base64 - замените на свою

https://ru.stackoverflow.com/a/556318/308951 вот так..смотрите

А так работает ?

Ну я только smil могу предложить
не проверял в firefox, apple safari
а вообще странно, столько лет Вы в WEB и до сих пор такие банальные вопросы

В value у вас есть 1ый path ,2ой path ,3й path и теперь после третьего состояния допишите в обратном порядке 3, 2, 1

конечно порнуха, но я завтра буду дома и сделаю по нормальному

в общем, градиент не возможно сделать с анимацией, но я попробую сделать это но будет с избыточным кодом, такую шляпу лучше вставлять в html скриптом

https://ru.stackoverflow.com/a/904634/308951 я раньше делал это

У меня четыре компа
1 мой самый говняный
Занимаюсь не для заработка но html css svg и js(на 30%) хватает
Использую linux soft - blender, vscode, gimp, inskape
Применяю не профессионально threejs,php
Под ubuntu нагрузку не замечаю..
Ставил федору мне понравилось...
В общем если пользоваться этим компам для заработка по любому надо по силиднее железяки

Как было сказано, надо было разделить этот path на два

Первый от М до z и второй от M и до z

https://codepen.io/topicstarter/pen/yLQQOrd

<svg xmlns="http://www.w3.org/2000/svg" width="305" viewBox="0 0 244 51" fill="none">


<g filter="url(#filter0_dii_618_508)">
<rect x="2" y="0" width="241" height="50" rx="10" fill="#EB1A7E" shape-rendering="crispEdges"/>
<rect x="2" y="0" width="241" height="50" rx="10" fill="url(#paint0_linear_618_508)" fill-opacity="0.2" shape-rendering="crispEdges"/>
<rect x="2" y="0" width="241" height="50" rx="10" fill="url(#paint1_radial_618_508)" fill-opacity="0.4" shape-rendering="crispEdges"/>
<rect x="2" y="0" width="239" height="48" rx="9" stroke="url(#paint2_radial_618_508)" stroke-opacity="0.5" stroke-width="2" shape-rendering="crispEdges"/>
</g>


<defs>
<filter id="filter0_dii_618_508" x="0" y="0" width="305" height="114" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="16"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.760784 0 0 0 0 0.0666667 0 0 0 0 0.4 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_618_508"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_618_508" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.47 0"/>
<feBlend mode="overlay" in2="shape" result="effect2_innerShadow_618_508"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3"/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_618_508" result="effect3_innerShadow_618_508"/>
</filter>
<linearGradient id="paint0_linear_618_508" x1="162" y1="78" x2="163" y2="28" gradientUnits="userSpaceOnUse">
<stop stop-opacity="0.56"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint1_radial_618_508" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(158 22.6429) rotate(90) scale(39.881 103.443)">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial_618_508" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120 28) rotate(41.0585) scale(190.308 51.3266)">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>

Размер ректов на много меньше чем размер канвас, исправил

На обычно свг в ручном режиме не сложно сделать, чуть чуть почитать документацию и понять что в векторном формате всё имеет абсолютное позиционирование

D3.js но надо учиться пользоваться
А ваще такие штуки на canvas делаются
Но почитайте эту и эту статью

Почитайте о display: table