Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing animation of an arrow in SVG

Tags:

css

animation

svg

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:

Straight arrow

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:

Curved arrow

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!

like image 735
KorHosik Avatar asked Oct 30 '14 13:10

KorHosik


People also ask

How do I animate a path in SVG?

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.

Is animation possible in SVG?

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.


1 Answers

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.

like image 94
Paesano2000 Avatar answered Oct 02 '22 06:10

Paesano2000