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!
External JavaScript To animate this path as if it's being drawn gradually and smoothly on the screen, you have to set the dash (and gap) lengths, using the stroke-dasharray attribute, equal to the path length. This is so that the length of each dash and gap in the dashed curve is equal to the length of the entire path.
Overview. SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include: <animate></animate> – which allows you to animate scalar attributes and properties over a period of time.
I think you might find this article on svg line animation very useful: https://css-tricks.com/svg-line-animation-works/
CSS:
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
Demo of it in action: http://codepen.io/chriscoyier/pen/bGyoz
In there is a caveat about JavaScript and determining the length of the line to draw. If you do not want to use JS, you can figure out what length to animate by updating the dasharray and dashoffset values.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With