Recently found an old backup of files from 2004, during my freshman year in college. I had worked on an SVG animation in class, and I remember my professor saying that SVGs were going to be a big thing. He was right.

solar.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> 
<svg width="500" height="500" x="0" y="0"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <desc>Example - demonstrate motion animation computations</desc>
  <rect x="1" y="1" width="498" height="498"
        fill="none" stroke="blue" stroke-width="2" />
  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <g id="orbit">
    <path d="M 100,250 C 100,50 400,50 400,250 400,450 100,450 100,250"
        style="fill:none; stroke:silver; stroke-width:2"  />
  </g>
  
  <!-- Here I define some nice color gradients and filter blurs that we can
       later assign to the circles to make them look more like planets. -->
  
  <linearGradient id="SunGradient" x1="1" y1="0" x2="0" y2="0"
                  gradientUnits="objectBoundingBox">
    <stop offset="0" style="stop-color:red"/>
    <stop offset="1" style="stop-color:yellow"/>
  </linearGradient>
  
  <linearGradient id="EarthGradient" x1="1" y1="0" x2="0" y2="0"
                  gradientUnits="objectBoundingBox">
    <stop offset="0" style="stop-color:seagreen"/>
    <stop offset="1" style="stop-color:skyblue"/>
  </linearGradient> 
    
  <linearGradient id="MarsGradient" x1="1" y1="0" x2="0" y2="0"
                  gradientUnits="objectBoundingBox">
    <stop offset="0" style="stop-color:red"/>
    <stop offset="1" style="stop-color:silver"/>
  </linearGradient>
  
  <!-- *** define a 'Venus' gradient here *** -->
  <linearGradient id="VenusGradient" x1="1" y1="0" x2="0" y2="0"
                  gradientUnits="objectBoundingBox">
    <stop offset="0" style="stop-color:darkorange"/>
    <stop offset="1" style="stop-color:sienna"/>
  </linearGradient>
  
  <filter id="Atmosphere" filterUnits="objectBoundingBox">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Blurred"/>
  </filter>
  
  <!-- Here I define a stationary circle in the middle of our solar system
       and give it a gradient to make it look like a sun. -->
  
  <a xlink:href="http://solarsystem.nasa.gov/planets/profile.cfm?Object=Sun"> 
    <g id="Sun">
      <circle cx="250" cy="250" r="50"
              style="fill:url(#SunGradient); filter:url(#Atmosphere);" />
    </g>
  </a>
  
  <!-- Here is a planet which will be moved about the motion path.
       It is defined at the origin and then the origin is translated 
       to the path starting point (100,250). -->
       
  <g id="planet_system">
       
    <animateMotion dur="20s" repeatCount="indefinite"
        path="M100,250 C 100,50 400,50 400,250 400,450 100,450 100,250"
        rotate="auto" />
  <!-- Here is the Earth planet which will be moved about the motion path.
       It is defined at the origin and then the origin is translated 
       to the path starting point (100,250). -->
       
    <!-- *** define a hyperlink here around the planet earth *** -->   
  <a xlink:href="http://solarsystem.nasa.gov/planets/profile.cfm?Object=Earth"> 
  <g id="earth" >
      <circle cx="0" cy="0" r="20"
              style="fill:url(#EarthGradient); filter:url(#Atmosphere);" />
      
      <g id="earth_moon">
        <animateTransform attributeName="transform" type="rotate" dur="6s"
                       values="0;360" repeatCount="indefinite" fill="freeze"/>
          <g transform="translate(-35,0)">
            <circle cx="0" cy="0" r="5" style="fill:slategray"/>
          </g>
      </g>
    </g>
  </a>    
  <!-- Here is the Mars planet which will be moved about the motion path.
       It is defined the same orbit as above and the translated away
       so that it will occupy another orbit on the canvas. -->      
  <a xlink:href="http://solarsystem.nasa.gov/planets/profile.cfm?Object=Mars">          
    <g id="mars" transform="translate(-160,-10)" >      
        <circle cx="0" cy="0" r="10"
                style="fill:url(#MarsGradient); filter:url(#Atmosphere);" />
        <g id="mars_moons">
          <animateTransform attributeName="transform" type="rotate" dur="3s"
                         values="0;360" repeatCount="indefinite" fill="freeze"/>
          <circle cx="0" cy="0" r="3" transform="translate(-21,0)"
                  style="fill:slategray;" />
          <circle cx="0" cy="0" r="2" transform="translate(-15,-10)"
                  style="fill:slategray;"/>
        </g>
    </g>
  </a>  
    
  <!-- Here is the planet Venus which will be moved about its motion path.
       It is defined the same orbit as Earth and the translated inward
       so that it will occupy a closer orbit to the sun. -->  
       
    <!-- *** define an inline style sheet in the Venus circle tag *** -->
    
  <a xlink:href="http://solarsystem.nasa.gov/planets/profile.cfm?Object=Venus">     
    <g id="venus" transform="translate(50,60)" >      
        <circle cx="0" cy="0" r="17" 
    style="fill:url(#VenusGradient); filter:url(#Atmosphere);"/>
</g>
  </a>
    
  
    <!-- Here is the planet Mercury which will be moved about its motion path.
       It is defined the same orbit as Earth and the translated inward
       so that it will occupy a closer orbit to the sun. -->
    
  <a xlink:href="http://solarsystem.nasa.gov/planets/profile.cfm?Object=Mercury">     
    <g id="venus" transform="translate(50,110)" >     
        <circle cx="0" cy="0" r="7" 
        style="fill:rosybrown; filter:url(#Atmosphere);"/>
    </g>
  </a>
    
  </g>
  
  
  
</svg>

The SVG file is malformed by today's standards, so you have to remove the DOCTYPE at the top:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

It looks like this!