Search code examples
csssvgsvg-animate

Animated growing arrow link

start

finish

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!

Solution

  • 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.