Trying to do the same as http://neography.com/experiment/circles/solarsystem/ with SVG code

solar.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%"
     height="100%"
     viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

  <path id="path1"
        d="
        M 100, 100
        m -100, 0
        a 100,100 0 1,0 200,0
        a 100,100 0 1,0 -200,0
        "
       fill="none" stroke="#394057" stroke-width="2"/>

  <path id="path2"
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
       fill="none" stroke="#394057" stroke-width="2" />



  <circle r="10" fill="brown">
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </circle>

  <circle r="5" fill="orange">
    <animateMotion dur="4s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path2"/>
    </animateMotion>
  </circle>
</svg>