html,body,svg { height:100% }

by Muthuraman B

HTML

<svg>
  <circle cx="100" cy="100" r="50" fill="red"/>   
  <path d="M 100, 100 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0" stroke="#529fd9" stroke-width="2" fill="none" id="wire" />
  <circle cx="0" cy="0" r="8" fill="#529fd9">
    <animateMotion dur="3s" repeatCount="forwards">
      <mpath xlink:href="#wire"></mpath>
    </animateMotion>
  </circle>
</svg>

CSS

svg {width:100%; height:300px;}