Animate svg path and polygon along the path - css

Question

I have this SVG arrow that is consist of a path and a polygon. I want to animate the path and the polygon along the path.
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397" width="242.66" height="397">
<style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}</style>
<path class="cls-1" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85"/>
<polygon points="0 384.74 2.04 381.29 19 391.37 27.81 373.72 31.39 375.51 20.65 397 0 384.74"/>
</svg>
I have tried this css, and it animates the path.
path {
stroke: #000000;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 4s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397" width="242.66" height="397">
<style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}</style>
<path class="cls-1" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85"/>
<polygon points="0 384.74 2.04 381.29 19 391.37 27.81 373.72 31.39 375.51 20.65 397 0 384.74"/>
</svg>
However, I can not figure how to move the polygon along the path with the same pace.
I have used this code that does not work.
polygon {
offset-distance: 0%;
offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
animation: move 2.1s linear forwards infinite;
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
How to animate the polygon along the same path?

Answer 1

The arrow will get rotated and positioned according to the offset-path.
css offset-path or svg SMIL <mpath> expect your animated element to point at the x/y origin of your svg like so:
Your arrow element is already placed on the path – the browser will add the current x/y values to the coordinates on your motion path.
In this case: your arrow disappears due to huge offsets. (see left example.)
.wrp {
padding: 1em;
//border: 1px solid #ccc;
display: inline-block;
}
svg {
display: inline-block;
width: 10em;
overflow: visible;
border: 1px solid #ccc;
}
.motionPath {
stroke: #000;
stroke-dasharray: 0 100;
animation: dash 2s linear forwards infinite;
}
.arrow {
offset-distance: 0%;
offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
animation: move 2s linear forwards infinite;
}
polygon {
offset-distance: 0%;
offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
animation: move 2s linear forwards infinite;
}
#keyframes dash {
to {
stroke-dasharray: 100 100;
}
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
<div class="wrp">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397">
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: bevel;
stroke-width: 4px;
}
</style>
<path class="cls-1 motionPath" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85" pathLength="100" />
<path class="arrow" stroke="red" fill="none" stroke-width="4" d="M-12.5 -12.5 l 12.5 12.5 l-12.5 12.5"></path>
</svg>
</div>
<div class="wrp">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397">
<style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}</style>
<path class="cls-1 motionPath" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85" pathLength="100"/>
<polygon fill="red" style="transform:translate(-25px, -300px)" points="0 384.74 2.04 381.29 19 391.37 27.81 373.72 31.39 375.51 20.65 397 0 384.74"/>
</svg>
</div>
I have replaced your arrow with another <path> element but you can reposition your original arrow polygon in an editor like inkscape to get the right coordinates and rotation.
You will also need to set a pathLength or calculate the exact pathLength with js like path.getTotalLength()
Otherwise you can't synchronize your stroke animation with the arrow movement.