Как анимировать обратный отсчет на svg?

Question

[Martovitskiy]

Есть таймер с обратным отсчетом

<div class="intro__timer timer">
                            <div class="timer__progress">
                                <svg viewBox="0 0 244 254" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                          d="M127.076 243.137C191.17 243.137 243.128 191.179 243.128 127.086C243.128 62.9926 191.17 11.0347 127.076 11.0347C62.983 11.0347 11.0251 62.9926 11.0251 127.086C11.0251 191.179 62.983 243.137 127.076 243.137ZM127.076 236.778C187.658 236.778 236.769 187.667 236.769 127.086C236.769 66.5046 187.658 17.3936 127.076 17.3936C66.495 17.3936 17.384 66.5046 17.384 127.086C17.384 187.667 66.495 236.778 127.076 236.778Z"
                                          fill="#000001"/>
                                    <g filter="url(#filter0_d)">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                              d="M18.1282 127.044C18.1282 66.9028 67.0342 18.1282 127.389 18.1282C129.598 18.1282 131.389 16.3373 131.389 14.1282C131.389 11.9191 129.598 10.1282 127.389 10.1282C62.639 10.1282 10.1282 62.4615 10.1282 127.044C10.1282 191.626 62.639 243.959 127.389 243.959C142.158 243.959 149.688 241.926 154.658 240.585C155.658 240.315 156.555 240.073 157.386 239.881C159.539 239.384 160.881 237.237 160.384 235.084C159.887 232.931 157.74 231.589 155.587 232.086C154.637 232.305 153.661 232.568 152.605 232.852L152.605 232.852C147.69 234.175 141.059 235.959 127.389 235.959C67.0342 235.959 18.1282 187.184 18.1282 127.044Z"
                                              fill="url(#paint0_linear)"/>
                                    </g>
                                    <defs>
                                        <filter id="filter0_d" x="0.128193" y="0.128204" width="170.359"
                                                height="253.831"
                                                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"/>
                                            <feOffset/>
                                            <feGaussianBlur stdDeviation="5"/>
                                            <feColorMatrix type="matrix"
                                                           values="0 0 0 0 0 0 0 0 0 0.28 0 0 0 0 1 0 0 0 0.7 0"/>
                                            <feBlend mode="normal" in2="BackgroundImageFix"
                                                     result="effect1_dropShadow"/>
                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow"
                                                     result="shape"/>
                                        </filter>
                                        <linearGradient id="paint0_linear" x1="85.3078" y1="10.1282" x2="85.3078"
                                                        y2="243.959" gradientUnits="userSpaceOnUse">
                                            <stop offset="0.604167" stop-color="#AC39F2"/>
                                            <stop offset="1" stop-color="#DE10FF"/>
                                        </linearGradient>
                                    </defs>
                                </svg>

                            </div>
                            <div class="timer__percent">
                                -37<span>%</span>
                            </div>
                            <div class="timer__time">
                                00:00:00
                            </div>
                            <div id="app"></div>
                            <div class="timer__sale">
                                <?= lang('discount') ?>
                            </div>
                        </div>

Дата приходит с контроллера

let currentTime = '1612174364';
  let eventTime = '1612199564';
  let timeNow = '1612185156';
  var diffTime = (eventTime - timeNow) * 1000;
  setInterval(function(){
    if(diffTime > 0) {
      diffTime = diffTime - 1000;
      var duration = moment.utc(diffTime).format("hh:mm:ss");
      $('.timer__time').text(duration);
    }
  }, 1000);

Таймер работает, теперь нужно анимировать path. Как это лучше сделать?

Answer 1

[Сергей]

Идею можно взять отсюда.