How can I make gradient line segments move along an SVG path - css

Question

I have an animation I would like to make on an HTML5 document. I would like to have some short line segments move along a path. The line segments should have a gradient so that the front is opaque and the tail fade out to fully transparent.
I could use a stroke-dasharray and animate an offset (https://css-tricks.com/svg-line-animation-works/#article-header-id-4) but so far as I can tell linear gradients for strokes behave essentially to the entire shape, not just the stroke segment (https://codepen.io/plava/pen/BjavpN).
Is there perhaps a way that I can take a line and slide it along another path? That would let me apply a gradient to that line alone. My lines are moving from left to right sort of following a sine wave like curve, so if the gradient doesn't bend with the line that is okay.
This is part of an Electron app, so it only needs to be compatible with a somewhat recent version of Chromium.

Answer 1

One way would be to use multiple paths with different length dashes and different opacities. As long as the dash arrays have the same total length, and the dashoffsets plus the first element of the dash array is the same value for each path, the ends of the dashes will be in the same position:
#path {
stroke-dasharray: 10 90;
animation: dash 5s linear alternate infinite;
stroke: black;
stroke-width: 5;
}
#path2 {
stroke-dasharray: 20 80;
animation: dash2 5s linear alternate infinite;
stroke: rgba(0,0,0,0.5);
stroke-width: 5;
}
#keyframes dash {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash2 {
from {
stroke-dashoffset: 110;
}
to {
stroke-dashoffset: 10;
}
}
It's kind of a hassle to keep adding more css, so I automated the creation of the css using some javascript here: https://jsfiddle.net/aqwg7ed6/
That fiddle automatically creates 32 paths which creates a nice effect.

Answer 2

here's how i managed to do so:
<svg id="group-01" width="1668" height="1527" viewBox="0 0 1668 1527" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="loop-01" d="M 417.00,-648.50 C 647.03,-648.50 833.50,-462.03 833.50,-232.00 833.50,-232.00 833.50,253.00 833.50,253.00 833.50,483.03 647.03,669.50 417.00,669.50 417.00,669.50 417.00,669.50 417.00,669.50 186.97,669.50 0.50,483.03 0.50,253.00 0.50,253.00 0.50,-232.00 0.50,-232.00 0.50,-462.03 186.97,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 Z" />
<path id="loop-02" d="M 1250.00,-648.50 C 1480.03,-648.50 1666.50,-462.03 1666.50,-232.00 1666.50,-232.00 1666.50,253.00 1666.50,253.00 1666.50,483.03 1480.03,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1019.97,669.50 833.50,483.03 833.50,253.00 833.50,253.00 833.50,-232.00 833.50,-232.00 833.50,-462.03 1019.97,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 Z" />
<path id="loop-03" d="M 418.00,670.50 C 648.03,670.50 834.50,856.97 834.50,1087.00 834.50,1087.00 834.50,1572.00 834.50,1572.00 834.50,1802.03 648.03,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 187.97,1988.50 1.50,1802.03 1.50,1572.00 1.50,1572.00 1.50,1087.00 1.50,1087.00 1.50,856.97 187.97,670.50 418.00,670.50 418.00,670.50 418.00,670.50 418.00,670.50 Z" />
<path id="loop-04" d="M 1251.00,670.50 C 1481.03,670.50 1667.50,856.97 1667.50,1087.00 1667.50,1087.00 1667.50,1572.00 1667.50,1572.00 1667.50,1802.03 1481.03,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1020.97,1988.50 834.50,1802.03 834.50,1572.00 834.50,1572.00 834.50,1087.00 834.50,1087.00 834.50,856.97 1020.97,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 Z" />
<radialGradient id="fade-01" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#80D2B5" stop-opacity="1" offset="0" />
<stop stop-color="#0D1115" stop-opacity="0" offset="1" />
</radialGradient>
<radialGradient id="fade-02" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#5332D5" stop-opacity="1" offset="0" />
<stop stop-color="#0E1216" stop-opacity="0" offset="1" />
</radialGradient>
<mask id="tail-01" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-01">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-02" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-02">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-03" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-03">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-04" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-04">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
</defs>
<g style="mask:url(#tail-01)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-01" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-02)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-02" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-03)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-03" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-04)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-04" />
</animateMotion>
</circle>
</g>
<rect x="833.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="834.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="1.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="0.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
</svg>