Максим

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

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

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

Как было сказано, надо было разделить этот 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>

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

Тег img можно распарсить на jquery таким образом
Object надо подумать

Хорошо, давайте по шагам
Я не много модернезировал эту схему, напишу сразу, что отлавливать click по rect внутри use очень проблематично



В данный момент, вам нужно приложить усилия и попробовать увеличить количество g.section со всем содержимым внутри ... то есть смотрите открывающий тег и закрывающий с class.section + добавить (самостоятельно ) transform="translateX()" где нужно отодвинуть одну секцию от предыдущей

<g class="section" style="transform: translateX(20px)">
    <g>
      <rect x="0" y="6"/>
      <rect x="0" y="120"/>
      <rect x="120" y="6"/>
      <rect x="120" y="120"/>
    </g>
    <g>
      <rect  x="0" y="294"/>
      <rect  x="120" y="294"/>
    </g>
  </g>

сразу после него идёт use - продублируйте это таким образом что бы получить нужное количество секций -- это будет ваша попытка решить эту задачу и потом вернёмся к вопросу о click и получению места и всей доп информации

Такие стрелки не так рисуются как в вашем случае.
Берётся обычный path и голочка вставляется через marker но я согласен с тем что код получается грамоздким
Опишите подробнее анимацию

<svg viewBox="0 0 300 50" width="300">
  <defs>
    <style>
      path{
        fill: none;
        stroke: #000;
        stroke-width: 2px;
        transition: 0.34s linear;
      }
    </style>
    <marker id="arrow" 
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="8"
      markerHeight="8"
      orient="auto-start-reverse">
      <path d="M-20,-20 5,5 -14,24"/>
    </marker>
  </defs>
  <path class="js_path" d="M5,24 100,24"  marker-end="url(#arrow)" />
</svg>

Но для анимации используем другой метод



Но можно анимировать path изменяя d



Хотя если вы хотите мелкие координаты в d =>

я там со слоями накосячил page2 это замок, page1 это toster
Если не ошибаюсь в figma можно импортировать только scetch и img а svg нельзя
но можно вставить как код и тогда svg отображается в figma
Здесь ваш замок в Figma

Здесь я взял весь логотип toster и поместил в figma

Путь для подобной анимашки не должен иметь много точек а их достаточно ТРИ вот что я и сделал и для удобства выбрал квадратную форму самого SVG, делается это так:
<svg viewBox="0 0 400 400"></svg>
После этого наш svg станет квадратным по соотношению сторон
Позже зададим размер видимой области той в которой удобно будет рисовать и пока пусть будет опять width и height = 400px
и ставим точки на нашем канвасе - 1) M40,100 2) 200,390 3) 390,10 что и будет как раз калочка и для декорации я добавил stroke-linejoin и stroke-linecap это закругления на концах линии и на стыке и потом уже анимация

но Нам для этого надо узнать длину пути (path) и делается это на javascript методом: path.getTotalLength(); и выводим эту штуку в cansole.log

вызываем метод анимации а их два - анимация увеличения от 0 до длины пути + анимашка прозрачности, в сумме получаем вот это =>
если не успели увидить анимашку нажмите rerun в окне сниппета

В вашем svg отсутствует обязательный аттрибут viewBox почитайте для,чего он нужен и если будете его использовать то данная проблема пройдёт

в inkscape есть опция : сохранить простой svg и так же есть настройки этой опции
а вы сохраняете как: inkscape svg

вот пример кода с inkscape:

<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
 <g fill-rule="evenodd">
  <path d="m73.327 135.91v42.409l20.315-4.4317v-36.105z" points="73.327381,178.31548 93.642178,173.88375 93.642178,137.77849 73.327381,135.90663 " fill="#353564"/>
  <path d="m73.327 178.32 34.774 14.139 20.858-8.9974-35.317-9.5736z" points="108.10119,192.45477 128.95966,183.45732 93.642178,173.88375 73.327381,178.31548 " fill="#afafde"/>
  <path d="m93.642 137.78 35.317-4.0436v49.722l-35.317-9.5736z" points="128.95966,133.73484 128.95966,183.45732 93.642178,173.88375 93.642178,137.77849 " fill="#e9e9ff"/>
  <path d="m73.327 135.91 34.774-5.9721 20.858 3.8003-35.317 4.0436z" points="108.10119,129.93452 128.95966,133.73484 93.642178,137.77849 73.327381,135.90663 " fill="#4d4d9f"/>
  <path d="m108.1 129.93v62.52l20.858-8.9974v-49.722z" points="108.10119,192.45477 128.95966,183.45732 128.95966,133.73484 108.10119,129.93452 " fill="#d7d7ff"/>
  <path d="m73.327 135.91 34.774-5.9721v62.52l-34.774-14.139z" points="108.10119,129.93452 108.10119,192.45477 73.327381,178.31548 73.327381,135.90663 " fill="#8686bf"/>
 </g>
</svg>

здесь я чуток поправил viewbox но делать надо это в редакторе



а свои какие то приколы любой редактор svg оставляет

https://jakearchibald.github.io/svgomg/ если руками не умеете то воспользуйтесь этим сервисом

Вставьте к себе этот (исправленный) код svg к себе в img и отпишитесь - работает или нет :https://codepen.io/topicstarter/pen/bGraopB

Не совсем понял я, что это значит "сделать svg адаптивным" ?
SVG можно сделать резиновым то есть что бы оно занимало всё пространство по ширине
В вашем svg надо было просто исправить viewBox: https://codepen.io/topicstarter/pen/ZEJLbem