phil phil -4 years ago 138
CSS Question

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!

Answer Source

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.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download