SVG HTML

Animated Rotating Arrow

This SVG example illustrates how to create an animated rotating arrow with a marker as its arrowhead.

AnimateRotatingArrow.svg

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="idArrowhead" markerWidth="9" markerHeight="9" refX="8" refY="4" orient="auto">
      <path d="M 0,0 L8,4 L0,8 Z" fill="black" stroke="black" />
    </marker>
  </defs>
  <circle cx="200" cy="200" r="150" fill="none" stroke="gray" />
  <g transform="translate(200 200)">
    <path d="M 0,0 L150,0" stroke="gray" fill="none" marker-end="url(#idArrowhead)">
      <animateTransform attributeName="transform" type="rotate" dur="7s" from="360" to="0" repeatCount="indefinite" />
    </path>
  </g>
</svg>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.