<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  		<g id="orbits">
  			<circle id="venusorbit" cx="250" cy="250" r="120" />
  			<circle id="earthorbit" cx="250" cy="250" r="165" />
		</g>
  		<g id="lineGroup" transform="rotate(-90 250 250)"></g>
  <circle id="earth" cx="250" cy="85" r="8" />
	<circle id="venus" cx="250" cy="130" r="5" />
  <circle id="sol" cx="250" cy="250" r="16" />
</svg>

body { 
  margin: 0;
  background: #000;
  overflow: hidden;
}
svg { 
  display: block; 
  margin: 0 auto;
  width: 50%;
}
#orbits circle {
  fill: none;
  stroke: #fff;
  stroke-width: 3px;
}
#lineGroup line {
  stroke-width: 1px;
}
#earth {
  fill: blue;
}
#venus {
  fill: hsl(60,80%,80%)
}
#sol {
  fill: yellow;
}

const earthDeg = 5,
earthOrbits = 8,
venusOrbits = 13,
resonance = earthOrbits / venusOrbits,
centre = 250,
earthDist = centre - parseInt(earth.getAttribute("cy"), 10),
venusDist = centre - parseInt(venus.getAttribute("cy"), 10);
let i = 0,
orbitals = setInterval(function(){
  earth.setAttribute("transform", "rotate("+ i + " " + centre + " " + centre + ")");
   venus.setAttribute("transform", "rotate("+ i / resonance + " " + centre + " " + centre + ")");
  let earthX = Math.cos((i*Math.PI/180)) * earthDist + centre,
  earthY = Math.sin((i*Math.PI/180)) * earthDist + centre;
  venusX = Math.cos((i/(earthOrbits/13))*Math.PI/180) * venusDist + centre,
  venusY = Math.sin((i/(earthOrbits/13))*Math.PI/180) * venusDist + centre,
  resLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  resLine.setAttribute('x1', earthX);
  resLine.setAttribute('y1', earthY);
  resLine.setAttribute('x2', venusX);
  resLine.setAttribute('y2', venusY);
  resLine.setAttribute('stroke', 'hsla(' + i + ', 50%, 50%, 0.5)');
  lineGroup.appendChild(resLine);		
  i += earthDeg;
	if (i == (360 * earthOrbits) + earthDeg) {
	  clearInterval(orbitals);
	 }
}, 60);