Creating a believable elliptical orbiting element (plane) with SVG and CSS? - css

Question

first time question poster here. After over 2 days of searching on StackOverflow & other sites, and playing on my own with CodePen, I just cannot seem to figure out how to create an orbiting path for an SVG element that isn't a circle.
Here's a copy of the closest thing I've come up with: http://codepen.io/Whatsit2yaa/pen/epbbRR?editors=100
And the code -
HTML:
<svg width="600" height="500" viewbox="0 0 600 500">
<path id="flight-path" fill="none" stroke="#CCC" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10" d="M592.7,308.1c-28.5,108.8-183,162.6-344.9,120.2C85.8,385.8-22.4,263.2,6.1,154.3
C34.6,45.5,189.1-8.3,351.1,34.2C513,76.6,621.2,199.3,592.7,308.1z"/>
<g id="plane" transform="translate(-199.4, -413.2)" scale="0.8">
<path d="M199.4,413.2L199.4,413.2c0.3,5.4,10.9,8.9,10.9,8.9l29.9,7.5l13.5,41.2l12.1,3.3l-6.6-37.8l24.6,6.8l3.9,6.2
l8,3.5l-4-14.1l10.7-10l-8.6-1.1l-6.5,3.3l-24.6-6.8l25.1-29l-12.1-3.3l-32.8,28.4l-29.7-9C213.1,411.1,202.4,408.7,199.4,413.2z" fill="#333"/>
</g>
<animateMotion
xlink:href="#plane"
dur="3s"
begin="0s"
fill="freeze"
repeatCount="indefinite"
rotate="auto-reverse"
>
<mpath xlink:href="#flight-path" />
</animateMotion>
</svg>
CSS:
html, body {
height: 100%;
}
body {
background: -webkit-linear-gradient(#FFF, #3276b1); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFF, #3276b1); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, #3276b1); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, #3276b1);
}
svg {
position: fixed;
overflow: visible;
top: 20%;
height: 60%;
left: 20%;
width: 60%;
}
Here's a pen showing what I'm trying to achieve:
http://codepen.io/guerreiro/pen/obhzc
And the code -
HTML:
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #FC0;
}
svg {
position: fixed;
top: 20%;
height: 60%;
left: 20%;
width: 60%;
}
I can't seem to get an SVG that isn't round to properly adjust & transform as it circles a planet in an ellipse that goes around an orbit.
I'm open to using SVG images with CSS transform if this is beyond SMIL capabilities. Any animators have advice/help for me? Thanks so much!