How to implement a continuous motion illusion in SVG? - animation

Question

Imagine a progress-bar like this one, which creates a sensation of motion towards the left:
Note: the thin bright-green line on top of the animation is a compression artifact.
I am looking for a way to implement something similar, but in an arbitrary SVG path, such as this one:
I am trying to understand what is really going on there, e.g.:
Is it a gradient with many stops, and the stops keep moving?
Are these many adjacent, skewed rectangles moving in unison?
Is it one long sequence of skewed adjacent rectangles, with a "sliding window" moving along it?
How can such animations be conceptualized? And what would be the best practice to implement it using SVG primitives?

Answer 1

I am using a path twice:#a and #b. Both #a and #b have stroke-dasharray: 1 but #b id offset stroke-dashoffset: 1;
I'm animating the stroke-dashoffset for both #a and #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>
UPDATE
If you use css variables you can use only one animation:
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

Well one way of doing it is with an animated pattern. Something like this:
<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>
You can also do it with a gradient, or a filter.