I'm quite new in SVG world and I'm facing some issues when I want to "draw" a curved arrow.
Basically, I would like to create an animation like the one explained in this article, but with a shape at the end of the path in order to display an arrow.
Below is the code I use for straight arrow:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<marker
id="arrow"
orient="auto"
viewBox="0 0 10 10"
markerWidth="3"
markerHeight="4"
markerUnits="strokeWidth"
refX="1" refY="5">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
</defs>
<path
id="line"
marker-end="url(#arrow)"
stroke-width="3"
fill="none"
stroke="black">
<animate
dur="2s"
repeatCount="indefinite"
attributeName="d"
values="M10,10 L10,10; M10,10 L45,25;" />
</path>
With a bit of CSS:
#line
{
stroke-dasharray: 5;
stroke-dashoffset: 10;
-webkit-animation: draw 1s linear infinite;
}
@-webkit-keyframes draw
{
to { stroke-dashoffset: 0;}
}
Result is below:
So that's cool, but now I would like a curved arrow. So I've updated the animate tag like below:
<animate
dur="2s"
repeatCount="indefinite"
attributeName="d"
values="M7,121 C7,121 7,121 7,121; M7,121 C66,4 143,75 147,125" />
I've just change the path to animate in order to have a curved one. But result is the one below:
I think it's quite logical, but it is not what I would like. The marker is currently moving on a straight line; it should follow the drawing path.
I have no idea how to do so to be honest, any suggestions would be great :)
You can find a JSFiddle here.
As you can see, no JS is used in these experiments, it would be great if we can avoid this language and just use SVG+CSS.
Thanks in advance!