Как реализовать иллюзию непрерывного движения в SVG?

Question

Представьте себе индикатор прогресса, подобный этому, который создает ощущение движения влево: Примечание. Тонкая ярко-зеленая линия в верхней части анимации является артефактом сжатия.

Я ищу способ реализовать нечто подобное, но по произвольному пути SVG, например, так:

Я пытаюсь понять, что на самом деле там происходит, например ::

• Это градиент с большим количеством остановок, и остановки продолжают двигаться?
• Эти много смежных, перекошенных прямоугольников движутся в унисон?
• Это одна длинная последовательность скошенных смежных прямоугольников, вдоль которых движется «скользящее окно»?

Как можно представить такие анимации? И что было бы наилучшей практикой для его реализации с использованием примитивов SVG?

Answer 1

Я использую путь дважды: #a и #b.И #a, и #b имеют stroke-dasharray: 1, но #b смещение идентификатора stroke-dashoffset: 1;

Я анимирую stroke-dashoffset для #a и #b.

use {
  stroke-dasharray: 1;
}
#a {
  stroke: green;
  animation: dasha 5s linear infinite;
}
#b {
  stroke: DarkSeaGreen;
  stroke-dashoffset: 1;
  animation: dashb 5s linear infinite;
}
@keyframes dasha {
  to {
    stroke-dashoffset: -54.66;
  }
}
@keyframes dashb {
  to {
    stroke-dashoffset: -53.66;
  }
}

<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
    <defs><path id="thePath"  fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
  </defs>
    <use id="a" xlink:href="#thePath" />
    <use id="b" xlink:href="#thePath" />
</svg>

ОБНОВЛЕНИЕ

Если вы используете переменные CSS, вы можете использовать только одну анимацию:

use {
  stroke-dasharray: 1;
}
#a {
  --offset:0;
  stroke: green;
  stroke-dashoffset: 53.66;
  animation: dash 5s linear infinite;
}
#b {
  --offset:1;
  stroke: DarkSeaGreen;
  stroke-dashoffset: 54.66;
  animation: dash 5s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: var(--offset)
  }
}

<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
    <defs><path id="thePath"  fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
  </defs>
    <use id="a" xlink:href="#thePath" />
    <use id="b" xlink:href="#thePath" />
</svg>

Answer 2

Ну, один из способов сделать это с помощью анимированного рисунка.Как то так:

<svg width="800px" height="600px">
  <defs>
    <pattern id="skewrect"  x="0%" y="0%" width="20%" height="100%" patternTransform="skewX(30)" viewBox="-7 160 60 60">
      <animate attributeName="x" from="20%" to="0%" dur="2s" repeatCount="indefinite"/>
      <polygon points="0,0 0,600 20,600 20,0" fill="green"/>
      <polygon points="20,40 20,600 40,600 40,20" fill="grey"/>
    </pattern>
  </defs>
  
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="url(#skewrect)" fill="none" stroke-width="10"/>
  
</svg>

Вы также можете сделать это с градиентом или фильтром.