Как сделать бесконечную SVG анимацию без CSS и JS с данными условиями?
Есть полоса в виде прямоугольника.
Полоску полностью заполняет градиент из цветов (неважно 2 цвета или 12).
Этот градиент из цветов должен прокручиваться с лева на право.
Например: #00FFFF #0080FF ##0000FF
— это градиент из цветов.
Когда цвет #00FFFF
проезжает от начала и до конца полосы он снова появляется в начале и так по кругу.
Т.е. все света "градиент из них" бесконечно крутятся внутри этой полосы.
<svg width="100%" height="100%">
<defs>
<lineargradient id="Gradient" x1="0" x2="0" y0="0" y1="0">
<animate attributeName="x1" values="0;0;0;1;1" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
<animate attributeName="x2" values="0;0;0;0;1" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
<animate attributeName="y1" values="0;0;0;0;0" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
<animate attributeName="y2" values="0;0;0;0;0" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
<stop offset="0%" stop-color="#00FFFF" />
<stop offset="9%" stop-color="#0080FF" />
<stop offset="17%" stop-color="#0000FF" />
<stop offset="25%" stop-color="#8000FF" />
<stop offset="34%" stop-color="#FF00FF" />
<stop offset="42%" stop-color="#FF0080" />
<stop offset="50%" stop-color="#FF0000" />
<stop offset="59%" stop-color="#FF8000" />
<stop offset="67%" stop-color="#FFFF00" />
<stop offset="75%" stop-color="#80FF00" />
<stop offset="85%" stop-color="#00FF00" />
<stop offset="100%" stop-color="#00FF80" />
</lineargradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" rx="10" fill="url(#Gradient)" />
</svg>
Ещё вот такой вариант кода удалось сделать, но это тоже не совсем то вышло.
<svg width="800" height="100" viewBox="0 0 800 100">
<lineargradient id="Gradient">
<stop offset="0%" stop-color="#00FFFF" />
<stop offset="9%" stop-color="#0080FF" />
<stop offset="17%" stop-color="#0000FF" />
<stop offset="25%" stop-color="#8000FF" />
<stop offset="34%" stop-color="#FF00FF" />
<stop offset="42%" stop-color="#FF0080" />
<stop offset="50%" stop-color="#FF0000" />
<stop offset="59%" stop-color="#FF8000" />
<stop offset="67%" stop-color="#FFFF00" />
<stop offset="75%" stop-color="#80FF00" />
<stop offset="85%" stop-color="#00FF00" />
<stop offset="100%" stop-color="#00FF80" />
</lineargradient>
<g>
<rect cx="0" cy="0" x="0" y="0" rx="0" ry="0" width="800" height="100" fill="url(#Gradient)"/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0; 0; 880" dur="2s" repeatCount="indefinite"/>
</g>
</svg>