Creating a believable elliptical orbiting element (plane) with SVG and 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!

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

0 Answers0