Animated growing arrow link

Question

Hi, I was wondering how one would go about animating an svg arrow like above (on hover).

I have tried playing around with CSS transforms, but they also scale the arrow-head which is no good. I assume the correct way to do this is using SVGs animations, but I don't know where to start. For example I would the following arrow (line only) to grow and arrow head to move accordingly.

<svg width="600px" height="100px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5"     marker-end="url(#arrow)" />
</svg>

Any help is very much appreciated!

score 9 · Accepted Answer · answered Mar 02 '17 at 05:22

9

You can create growing arrow by using "respoinsive" SVG like this.

svg{
  width: 20px;
  height: 20px;
  transition:width 2s ease;
  overflow: visible;
}
svg:hover{
  width: 100px;
}

<svg>
  <defs>
    <marker id="m" markerWidth="4" markerHeight="8" 
    refX="0" refY="1" viewBox="0 0 1 2">
      <polygon points="0,0 1,1 0,2" fill="black"/>
    </marker>
 </defs>
  <line x1="0" y1="50%" x2="100%" y2="50%" 
  stroke-width="2" marker-end="url(#m)" stroke="black"/>
</svg>

There are some points to implement.

svg has no viewBox (so it is "responsive" SVG).
Line of arrow is defined by relative position of (root) svg size.
Arrow head is defined by marker element.
Growing animation is defined by CSS transition which animate width of svg. So, arrow grows with svg size.

answered Mar 02 '17 at 05:22

defghi1977

5,081
1
30
29

Thank you! This is exactly what I was looking for! Could you give a hint how would one go about making a left facing arrow as well? – phil Mar 02 '17 at 14:33
1

You should create another marker element and set this to `marker-start` property of `line` element. – defghi1977 Mar 02 '17 at 21:52
1

you need to add `stroke="none"` in `polygon` otherwise IE will get a black rectangle instead of the triangle. see this [answer](https://stackoverflow.com/a/42140313/3448527) – dippas Oct 17 '17 at 17:41

score -1 · Answer 2 · answered Mar 02 '17 at 04:20

In order to animate the individual SVG elements like HTML elements, you'll need to embed the SVG directly into the page like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
   xml:space="preserve" class="logo">

<ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z"/>
<filter id="pictureFilter" >
  <feGaussianBlur stdDeviation="15" />
</filter>
</svg>

After doing this, you can use CSS animations on any of the individual SVG elements, just like HTML elements. For example, you could do the following:

svg ellipse { animate: grow 3s infinite; }

Without having the exact SVG code for your arrow, I can't give you more specific direction than that, but can point you in the direction of this article: https://css-tricks.com/using-svg/

Animated growing arrow link

2 Answers2