I am attempting to create a seamless loop of a single arrow within a div.
My approach involves using two SVG arrows in such a way that when the top part of the first arrow is hidden, the corresponding section of the second arrow should be displayed. This would give the illusion that only one arrow is being used, continuously moving in a loop (as the first arrow disappears at the top, the second arrow's equivalent section should appear at the bottom).
.arrows-wrapper {
width: 124px;
height: 83px;
overflow: hidden;
position: relative;
background-color: gray;
}
.arrows-wrapper svg {
position: absolute;
}
.arrows {
animation: slide 4s linear infinite;
}
.arrow2 {
animation-delay: 2s;
}
@keyframes slide {
from {
transform: translate(0, -25px);
}
to {
transform: translate(0, -125px);
}
}<div class="arrows-wrapper">
<svg width="124" height="197" viewBox="0 0 124 197">
<g class="arrows arrow1">
<polyline stroke="yellow" stroke-width="2" fill="none" points="50,110 61,104 72,110"></polyline>
<polyline stroke="yellow" stroke-width="4" fill="none" points="50,116 61,110 72,116"></polyline>
<polyline stroke="yellow" stroke-width="2" fill="none" points="50,122 61,116 72,122"></polyline>
</g>
</svg>
<svg width="124" height="197" viewBox="0 0 124 197">
<g class="arrows arrow2">
<polyline stroke="yellow" stroke-width="2" fill="none" points="50,110 61,104 72,110"></polyline>
<polyline stroke="yellow" stroke-width="4" fill="none" points="50,116 61,110 72,116"></polyline>
<polyline stroke="yellow" stroke-width="2" fill="none" points="50,122 61,116 72,122"></polyline>
</g>
</svg>
</div>To visualize my progress so far, you can view the demo (note that currently both arrows are visible simultaneously, but ideally only one arrow or a portion of it should be visible at any given time).
The desired outcome looks like this: https://i.sstatic.net/HGNnZ.jpg
My question is whether achieving this result is feasible.