QbqWJP

index.html

<h1>Responsive SVG SMIL Animation</h1>

<div id="meeting-national-geographic-map" class="map playing">
    <p id="map-rally">
        <strong>Rally Interactive</strong> 
        (Salt Lake City)
    </p>
    <p id="map-national-geographic">
        <strong>National Geographic</strong> 
        (Washington D.C.)
    </p>
    <p id="map-distance"> 
       <strong>2,083.9</strong>
        Miles
    </p>
    <div id="flight-path">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 624 226" preserveAspectRatio="xMinYMin slice">
            <path d="M24.9,143.2 c76-105.1,410-227.1,574.5,58.4" id="plane-path"></path>
            <circle cx="24" cy="145" r="8" stroke-width="6" stroke="#c79681" fill="#9f6046" class="circle"></circle>
            <circle cx="592" cy="195" r="8" stroke-width="6" stroke="#c79681" fill="#9f6046" class="circle"></circle>
            <image xlink:href="http://deadbinky.com/projects/rallySnippets/plane.png" id="plane" x="-25" y="-25" width="50" height="50">
                <animateMotion class="svg-anim" id="plane-motion" dur="9s" rotate="auto" fill="freeze" begin="0s" repeatCount="once" calcMode="spline" keySplines="0.833333 0.02 0.5 1" keyTimes="0; 1">
                     <mpath xlink:href="#plane-path"></mpath>
                </animateMotion>
            </image>
        </svg>
        
    </div>
    <div id="flight-path-shadow">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 616 173" preserveAspectRatio="xMinYMin slice">
            <path d="M26.5,86.5 c39.5-41.8,385-139.6,564,61" id="plane-shadow-path"></path>
            <image xlink:href="http://deadbinky.com/projects/rallySnippets/plane-shadow.png" id="plane-shadow" x="-25" y="-25" width="50" height="50">
                <animateMotion class="svg-anim" id="plane-shadow-motion" dur="9s" rotate="auto" fill="freeze" begin="0s" repeatCount="once" calcMode="spline" keySplines="0.833333 0.02 0.5 1" keyTimes="0; 1">
                     <mpath xlink:href="#plane-shadow-path"></mpath>
                </animateMotion>
            </image>
        </svg>
        
    </div>
</div>

QbqWJP.markdown

QbqWJP

Forked from Jenn olsen's Pen DxhpK.

A Pen by Saumil Shah on CodePen.

License.

style.css

@import url("http://fonts.googleapis.com/css?family=Montserrat");

body{
  background: #442c24;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 400;
}

h1{
  color: #fff;
  text-align:center;
}

#meeting-national-geographic-map {
  background-image: url(http://deadbinky.com/projects/rallySnippets/national-parks-map.jpg);
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#map-rally, 
#map-national-geographic, 
#map-distance {
  color: #fff;
  padding: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
}

#map-distance strong, 
#map-rally strong, 
#map-national-geographic strong {
  display: block;
}

#map-rally, 
#map-national-geographic {
  margin-top: 10px;
}

#map-rally {
  left: 20%;
  margin-left: -70px;
  top: 42%;
  width: 140px;
}

#map-national-geographic {
  left: 83%;
  margin-left: -73px;
  top: 52%;
  width: 146px;
}

#map-distance {
  background-image: url(http://deadbinky.com/projects/rallySnippets/national-parks-map-miles.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  box-sizing: border-box;
  height: 25%;
  left: 50%;
  margin-left: -70px;
  max-width: 140px;
  min-width: 70px;
  padding-top: 60px;
  padding-bottom: 80px;
  top: 40%;
  width: 25%;
}

#plane-path {
  fill: none;
  opacity: .8;
  positon: relative;
  stroke: #9f6046;
  stroke-width: 3;
  stroke-dasharray: 4;
  z-index: 1;
}

#plane-shadow-path {
  fill: none;
  opacity: .2;
  stroke: #000;
  stroke-width: 3;
  stroke-dasharray: 4;
}

#flight-path {
  left: 20%;
  position: absolute;
  top: 14%;
  width: 66%;
  z-index: 2;
}

#flight-path-shadow {
  left: 20%;
  position: absolute;
  top: 23%;
  width: 67%;
}

#plane {
  opacity: 0;
  position: relative;
  z-index: 3;
  -webkit-animation: plane 9s forwards;
  -moz-animation: plane 9s forwards;
  animation: plane 9s forwards;
}

#plane-shadow{
  opacity: 0;
  -webkit-animation: plane-shadow 9s forwards;
  -moz-animation: plane-shadow 9s forwards;
  animation: plane-shadow 9s forwards;
}

.circle {
  position: relative;
  z-index: 2;
}

@media (min-width: 1110px){
  #meeting-national-geographic-map {
    height: 600px;
    width: 1000px;
  }

  #map-rally, 
  #map-national-geographic, 
  #map-distance {
    font-size: 16px;
    line-height: 20px;
  }
  
  #map-rally strong, 
  #map-national-geographic strong, 
  #map-distance strong {
    font-size: 24px;
    text-transform: none;
  }
}

@media (max-width: 1109px) and (min-width: 451px){
  #meeting-national-geographic-map {
    padding-bottom: 60%;
    width: 100%;
  }
  
  #map-rally, #map-national-geographic, #map-distance {
    font-size: 13px;
    line-height: 20px;
  }
  
  #map-rally strong, 
  #map-national-geographic strong, 
  #map-distance strong {
    font-size: 20px;
    text-transform: none;
  }
}

@media (max-width: 450px) {
    #meeting-national-geographic-map {
    padding-bottom: 60%;
    width: 100%;
  }
  
  #map-rally, 
  #map-national-geographic, 
  #map-distance {
    font-size: 8px;
    line-height: 15px;
  }
}

@-webkit-keyframes plane {
  0% {
    opacity: 0; }

  15% {
    opacity: 1; }

  98% {
    opacity: 1; }

  100% {
    opacity: 0; } }
@-moz-keyframes plane {
  0% {
    opacity: 0; }

  15% {
    opacity: 1; }

  98% {
    opacity: 1; }

  100% {
    opacity: 0; } }
@keyframes plane {
  0% {
    opacity: 0; }

  15% {
    opacity: 1; }

  98% {
    opacity: 1; }

  100% {
    opacity: 0; } }
@-webkit-keyframes plane-shadow {
  0% {
    opacity: 0; }

  25% {
    opacity: 1; }

  75% {
    opacity: 1; }

  98% {
    opacity: 0; } }
@-moz-keyframes plane-shadow {
  0% {
    opacity: 0; }

  25% {
    opacity: 1; }

  75% {
    opacity: 1; }

  98% {
    opacity: 0; } }
@keyframes plane-shadow {
  0% {
    opacity: 0; }

  25% {
    opacity: 1; }

  75% {
    opacity: 1; }

  98% {
    opacity: 0; } }