<svg id="dashedDemo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
  <title>Dashes Demo</title>
    <defs>
    <radialGradient id="radial-gradient" cx="500" cy="1500" r="500" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="0.18" stop-color="#eee"/>
      <stop offset="0.44" stop-color="#dbdbdb"/>
      <stop offset="0.71" stop-color="#d0d0d0"/>
      <stop offset="1" stop-color="#ccc"/>
    </radialGradient>
  </defs>
<rect width="2000" height="2000" fill="#fff"/>
<rect x="1000" width="1000" height="1000" fill="#9cb772"/>
<rect width="1000" height="1000" fill="#262626"/>
<rect y="1000" width="1000" height="1000" fill="#a55359"/>
<text transform="translate(80.14 338.58)" font-size="90" fill="#f2f2f2" >Animating Dashed Lines
<tspan x="99.56" y="120">With the DrawSVG</tspan>
<tspan x="17.9" y="240">plugin from GreenSock</tspan>
<tspan x="93.38" y="360">is easy with masks</tspan>
</text>
<g id="AirTravel">
<rect x="1000" y="1000" width="1000" height="1000" fill="#0071bc"/>
<path id="map" fill="#8cc63f" d="M1701.27,1431.16l24.07-4.13-59.9,10.28c3-1.81,3.07-5.55,4.77-10.77,0.82-2.47,3-5.76,3-9.05,0-13.16-9.54-18.43-9.54-32.91,0-3.79,2.47-5.27,2.47-9.87,0-1.81-1.15-3.13-1.15-4.94,0-3.13,6.91-12.67,8.72-12.34,0.82,2.14-.16,2.47-0.16,4.94a2.36,2.36,0,0,0,2.14,2.47c1.81,0,2.8-2.3,2.8-4.11,0-2.63-2.47-3.95-2.47-6.58,0-2.47,2.14-3.29,3.62-4.11a8,8,0,0,1-.33-2.47c0-3,2.14-6.91,5.43-6.91,3.13,0,6.42,2.8,9,2.8,0.33,0,3,2.3,5.26,3,9.71,3.13,12.34,6.42,12.34,19.25,0,7.08-6.09,9.55-6.09,15.63,0,2.47,2.14,5.43,4.44,5.43,3,0,2.47-4.94,3.29-7.4,0.49-1.48,4.12-5.76,7.08-5.76,8.34,0,9.78,15.94,14.2,22.69a2.76,2.76,0,0,0,1.26,1.08c-0.56,3.23.64,6-1.47,8.64-1.32,1.81-6.58,6.42-6.58,9.05l0.82,2.14-3,8.23c0,3.78,6.09,2.3,8.23,5.26,0.33-.16,1.32-1.15,2.14-1.15,2,0,3.29,1.65,5.26,1.65,3.13,0,3.62-3.62,6.25-4.61,1.15-.33,4.11.33,5.76-0.82,5.59-4.11,7.73-9,15.14-13.49a28.92,28.92,0,0,0,3.05-2.08L1774,1422l-2.78-11.62c4-3.14,7.25-7.6,10.42-11.64l8.67-9.78,1.54-1.74,0.08-2.17h-1.64c-1.15-3.46-2.18-4.41-3.17-7.7l2,0.29c6.58-.82,16.78-6.75,22.54-9,6.91-2.63,10.86-4.94,14.81-10.37,0.66-1,3-1.32,3-3.62,0-4.94-4.11-3.79-4.11-9.54,0-4.28,5.76-5.59,5.76-9.38a14.51,14.51,0,0,0,.33-2.47c0.65-5.06,6-10.66,10.82-15.73l22.75-8.63,28-10.37c1.15-2.3.16-.66,0.16-3.62s2.46-3.79,4.64-5l0-.08H1898a6.7,6.7,0,0,0,2.63-2.3c2.14-3.79,3.29-10.53,3.29-14,0-4.28-2.47-4.44-2.47-9.38,0-5.92.82-10.7,0.82-17.28,0-2.8,2.14-16.12,4.11-16.12,1.81,0,2.3,2.47,4.11,2.47,0.49,0,.84.82,1.32,0.82,3.95,0,6.42-8.23,9.38-8.23,3.95,0,5.76,4.11,9.54,4.94l1.7,1.63,11.47,25.52c7.9,0,9.21,9,13.16,9h3.29c2,1.15,3,3.46,3,6.25,0,1.48-3,1.81-3,2.63a4.46,4.46,0,0,0,.82,2c-1.65.82-.82,2.3-1.48,3.62-0.82,1.65-4.94.33-4.11,4a2.37,2.37,0,0,0-1.32,2.14,2.11,2.11,0,0,1-2.14,2.3c-1.65,0-1.32-1.15-2.47-1.15-0.66,0-1,1.32-1.65,1l-0.82,1.65c0.49,1.32,1,1.65,1,2.8,0,2-2.3,4-3.29,4s-0.82-1.81-1-2.47l-3.62-2.8-1.15,10.7c-0.33,0-1,.33-1,0-1.32,1-2.47,2.14-2.47,3.78-1,1.65-.33,4.44-3,4.44a4.54,4.54,0,0,0-1.48-.16c-0.82.49-1,2.3-2.47,2.3l-3-1c0.66,1.15,1,.66,1.65,1.65-2,2-.66,4.11-3,5.59a2.5,2.5,0,0,1,1.32,1.32c-0.66.66-3.29,8.56-3.29,8.56,0,0.49.82,1,.82,1.48l-1.15,4.11,0.33,0.17v1.81a39.58,39.58,0,0,1-.8,4.4l0.14-.12c0.66,1,2.8,3.29,4.28,3.29a6.72,6.72,0,0,1,1.81-.16c-1.48,1-2.3,1.65-2.8,3.12-0.49,1.65.16,3.79-.82,4.28v2.14h2.8c0.16,0.49,1-.33,1.48-0.33s0.66,1,1,1.32c3,3,4.61,7.57,9.54,7.57,2,0,5.92-2.14,5.92-3.62,0-.82-1-1.32-1-2.14-1.65,0-1.81-2-3.13-2a2.8,2.8,0,0,1-1.65,0,3.85,3.85,0,0,1,1.15-1.15c4.77,1.15,6.91,6.42,8.56,11.52a1.46,1.46,0,0,1-.82-1.31c-1.48.33-2.47,0.66-3.13,0-4.61-1.15-5.6,5.92-9.05,5.92a0.89,0.89,0,0,1-.66-0.82,12.22,12.22,0,0,0-.16-3.46c-2.63,1.32-2,6.58-5.6,6.58l-0.16.17h-0.17a1.9,1.9,0,0,1-1.48,1.64c-2.47,0-2.14-3.78-5.1-4.28a5.53,5.53,0,0,1,0,1.65c0,1.15,1.32,4.94,2,5.26-0.49,2-3.86,2.83-6,3.66l-0.08-.23c-7,6.8-22.43,8.65-28,17.15-0.16,1.81-1.15,3-.16,4.77-1.15.66-.77,1-1.6,0.33,0-.17,0-0.66,0-0.82-1.65,2.8-1.48,4.77-3.29,8.56-0.33.82-1.32,1-1.32,2.47s1.32,1.32,2.47,1.32h3.29c0,1.15,1.15,5.26,1.81,5.59v8.89h-0.17v5.27a62,62,0,0,1-4.11,10.37c-0.33.82-2.47,9.38-3.95,9.38,0-1.48-.66-4.44-1.81-4.44-1.65,0-2.3,1.65-3.95,2-1.32-4.11-8.56-7.07-8.56-11.52v-0.82l-0.53-1a5.6,5.6,0,0,1,.53,1.52c0,0.66-1,1-1,1.65,0,0.49,1,.66,1.15,1.15,1.32,4.28,3.62,4.44,4.77,7.9l-0.66,2.3c1.32,4.11,4.12,7.37,9.39,6l1,2.51a2.43,2.43,0,0,0-.82,1,23.42,23.42,0,0,0,2,2.14v0.33c0,1.81.42,10.49-.9,11.32,1.15-1.15-.74-2.88-0.41-3.7v-3.09c-2.47,1.15.25,4.65-1.23,6.79a1.13,1.13,0,0,1-.42.28,4.8,4.8,0,0,1,.49-0.08c-2,6.91-5.27,10.2-5.27,18.1,0,2,.66.66,0.33,2.47-2-.5-2.8-5.27-2.8-7.73,0-4.77,3-6.75,2.47-10.37,1.11-.5,2-1.26,3.08-1.8-1.42.46-3.13,1.11-3.84,2.45a7,7,0,0,0-1.54-.82c-1.48,0-2.3,1.32-3.78,1.32a0.88,0.88,0,0,1,0-.66c0-.66,1.15-2.3,1.65-3.29-0.33,0-.82.17-1.15,0.17l-1.48.82a5.52,5.52,0,0,0,.66-2c0-.33-0.33-0.82-0.33-1.15-1.15.33-1.81,1.48-2.63,1.48-0.49,0-.66-1.15-1-1.48-1.64-1.65-3.29-3.29-3.29-5.76,0-1.65,2.14-1,3.46-1,0-.16.33-0.66,0.33-0.82-2.3,0-5.59-.66-5.59-2a2.38,2.38,0,0,1-1.32-1.48v-1.65a1.71,1.71,0,0,1-.49.66,2.19,2.19,0,0,1-1.48-1,1.6,1.6,0,0,1,1.48-.16v-1.32c-1.15-.49-3-2.3-3-3.78,0-4.28,4.44-8.23,6.25-10.69-0.49,0-1-.16-1.48-0.16-0.66,2.63-3.46,4.28-4.94,5.26s-3.78,1.48-3.78,3a33.31,33.31,0,0,0,1.15,3.79c-0.82.33-1.32,0.33-1.65,1,1,0.33,1.15.82,2,1-0.17,1,.66,2.14.66,2.8,0,1.15-1.81,1.64-1.81,2.47s5.76,7.08,6.58,7.24a1.71,1.71,0,0,0,1.15,1.81,1.24,1.24,0,0,1-.82,1.15l-4.28-4.44h-0.16v1.48c3,4.44,6.58,3.46,9.54,8.06a1.79,1.79,0,0,1-1,.16c-3.46,0-9.71-3.95-15-3.95,1.32,1.65,5.92,4.61,9.21,4.61h-0.33c6.58,0,8.72,4.44,9.87,9.38l-3.86-1.44c-3.46-1-4-1-6.67-3,3.13,5.43,12.84,3.62,13.33,9.87h-2.47c-0.33,1.15.16,3.62-1.65,3.62a2.25,2.25,0,0,1-.6-0.08c2.51,2,4.53,3.74,6.85,5.68a2.71,2.71,0,0,1-1.65.16c-1.32,0-4.11-2.14-6.58-3,4.11,2.47,9.71,6.91,14.32,8.39a3.93,3.93,0,0,1,1.64-1.65c0.66,1.32,2.85,2.31,2.19,3.63,1,2.8,2.58,4.6,3.24,7.4h-3l-1.15-.82a4.21,4.21,0,0,1,0,2.47c-0.49,0-2.47-1.15-2.47,0s-0.49,1.64-2.47,1.64c-0.16,2.47-1.81,4.11-3.29,4.11-1.15,0-2.14.49-3.29,0.33a3.68,3.68,0,0,0,2.47,1.32,3.91,3.91,0,0,0,2.8-2H1878c1.32-.16,2.14-1.32,3-2.14a14.8,14.8,0,0,1,3,5.76c1.15-1.48.66-5.26,3.46-5.26,0.33,0,3,5.1,3,3.13,0-2.63-1.48-3.46-1.64-5.6h2v8.56c0,2.63-5.43,10.37-9.38,10.37a2.06,2.06,0,0,1-1.32-1.32c-1.48.49-2.63,0.16-4.11,0.16a10,10,0,0,0,1.32-1.32c-2.3.31-3.75,3.47-7.53,2.7,3.75,1,7.06.42,9.5,2.4a6.16,6.16,0,0,1-2.47,2.14,16.81,16.81,0,0,0,1.65.66c-1,2.3-1.81,4.77-4.11,4.77a3.61,3.61,0,0,1-2.63-1.15,2.94,2.94,0,0,1-.17,1.65h4.94c2-2,5.27-2.14,7.41-3.78a5.53,5.53,0,0,0,1.65,0c0.66,0,1.15-.66,1.64-1.48-1.64,3.79-4.93,5.43-4.93,10.2-2,.49-3.46-0.66-5.43,0-3.62,1.32-7.9,6.58-10.37,5.26-0.82.82-.33,2.14-0.33,3.29,0,0.66-4.44,3.95-4.93,4.94-1.81,3.13-1.32,8.23-2,11.52-5.92,0-7.4,1.65-11.52,2.47v0.49c-2.14,1.32-8.72,10.37-8.72,12.67v3.29a7.39,7.39,0,0,1-5.76,7.41c0,3.95-2.8,5.92-5.76,7.07v2c0,3.46-4.77,5.92-9.38,6.42,0.49,0.82,1.65,1.32,1.65,2.3,0,2-1.65,1-3,2-3.62,2.63-2,6.91-4.93,9.87,0,0.82-1.15,1.48-2,1.64a17.74,17.74,0,0,1,0,3c-1,.49-2.14.66-2.14,1.65v2.47c0,1.48-2,5.92-2,7.41,0,0.49,1.48,1.32,2,1.64a15.72,15.72,0,0,0-1.15,6.91c0,3.29.82,4.44,0,6.25l0.82,0.33c0,5.1,3.46,8.89,4.94,11.52,5.43,9.22,6.42,18.43,12.34,26.33,2.47,3.29,6.09,4.61,8.56,7.9v8.56c2.47,4.11,4.28,6.42,6.58,10.36v-0.49c4.61,5.93,8.72,11.19,11.19,18.92,1.15,3.46-.66,10.2.82,14v10.37c-2.3.66-3,3-3,5.27,0,2.14,2.14,3.13,2.14,4.61,0,6.42-8.56,12.83-13.16,15.8,3.29-2.63,8.39-7.08,9.87-11.52a3.38,3.38,0,0,0-2.14-.66c-3.13,0-4.94,4.11-9.05,4.11-5.1,0-3.78-4.11-4.44-8.56-0.49-3-3.62-5.1-5.76-6.25-3-1.65-4-1.15-7.41-2.47-3-1.15-2.14-5.1-3.29-8.23-0.49-1.48-1.81-1.81-1.65-2.8-1-.17-5.76-1.81-5.76-3.29,0-2.14,1-4.11-.33-5.76a11.94,11.94,0,0,1-3,2.8c-0.16-.33.33-1.15,0-1.15-1.81,0-9.87-12.67-9.87-13.66,0-1.48,1.48-1.48,2.47-1.65,0-2.63-.66-6.42-0.82-8.23-2.47,1.15-2.3,3.78-3.13,6.25-2.63-2-3.46-4.44-3.46-8.23,0-4.94,1.65-6.75,1.65-11.52,0-6.58-4.11-8.23-4.11-13.16-12.51-1.65-13.66-16.45-24.68-16.45-12.51,0-14.32,10.2-26.33,10.2-3.13,0-4.11-1.48-4.11-4.11h-0.82l-0.49-.33c-2.47-4.94-13.82-8.72-19.75-8.72-7.73,0-13.66,3.13-19.25,4.11-1.48.49-4.28,2.14-6.25,2.14-2.63,0-4.94-7.9-5.76-9.87-1.65,2.47-2.3,9.38-.33,11.85h-11.52l-0.49-.33c-1-.49-2.14,0-3.29,0-1.81,0-12.67,0-14.15,2.47a3.27,3.27,0,0,0-.17,2.47c-4.77-.33-5.76-4.11-9.87-4.11-1,0-5.43,3.13-5.43,5.26,0,2.47,3,2.14,4.94,2.14h3.78c0-.49,3.95-2.3,4.94-2.3-0.49.82-3.95,3.95-1.65,3.95,3.29,0,4.11-2,5.76-4.11h2.8c-0.66,2-2,4.61,0,5.26a2.18,2.18,0,0,1-1.65,2.14,6,6,0,0,0,1.32,1.48,15.67,15.67,0,0,1-5.43,3.46c2.8,2.3,7.57,5.43,11.52,4.44,0.49,1.65,1.48,2,2.14,3v4.11c-2.8-.66-0.33-0.82-3-0.82h-2c-2-2-8.39-7.08-12-7.08-1,0-1.64,1.15-1.64,2.14a20.38,20.38,0,0,1,2.14.82c-2.3,2.3-3,6.25-6.58,6.58,0-3.29-.49-4.94-3.29-4.94-4,0-3,4.94-6.58,4.94-2,0-7.4-2.14-9.54-3.29-2.47-1.48-1-7.4-5.92-5.76-0.33-2.3-4.94-5.43-7.24-5.43-1,0-5.43,3.13-5.76,3.46,1.65,1.64,6.75,1,9.05.33-0.17,2.14-.82,3.62-2,3.62-3.13,0-6.91-1.15-11.19-1.15-6.91,0-12.18-4.61-18.43-4.61-4.61,0-8.23,3.29-11.52,3.29a1.88,1.88,0,0,1-1.06-.86c-3.42,3.06-8.71,4.14-14.24,7.44-3.13,1.81-5.76,7.08-8.23,9.54-6.58,6.58-11,7.57-19.75,11-4.93,2-8.23,10.53-13.49,13.16-5.1,2.47-10.69,14.81-10.69,21.39,0,2.8.82,5.26,1.15,8.23,0.17,1.48,5.43,14.48,5.43,14.48h0.66a19.19,19.19,0,0,1-4.44,2.47l-0.11.78c-10.7-7.82-17.5-4.56-28.69-10.65-9.71-5.27-11.52-19.75-16.45-29.62-2.47-4.94-6.75-7.08-9.05-10.7-9-13.66-12.34-36.2-33.73-36.2-16.13,0-17.77,9.05-24.68,18.1-8.56-4.28-13.82-9.54-20.57-14-2.47-1.65-6.09-1.48-7.4-4.11-2.63-5.43-.16-10.86-3.29-15.63-4.44-6.75-11.68-10.86-18.92-15.63-4.77-3.13-8.72-11.85-12.34-16.45h-30.44v9.87l-16.81-1.4,0-.74,0,0.74-32.55-2.71-75.69-37v-4.11l-42-3.29c-1.81-3.78-1.15-6.25-1.15-10.36,0-7.24-6.09-12.51-9.54-16-1.32-1.32-3.62-4.61-5.27-4.61a21.88,21.88,0,0,1-3.29,0s-0.33-3.62-1.65-4.11c-4.77-1.81-11.52-5.1-13.16-10.2-1.81-5.76-14.48-8.23-19.74-8.23-1.15,0-3.79-1.81-3.79-3.29,0-5.92,2.3-8.23,3.29-13.16-2.3-.66-4.44-1.81-4.44-4.12a2.7,2.7,0,0,1,1.15-2.47c-4.28-10.7-14.32-16.29-14.32-30.44,0-3.78,4.11-2.63,4.11-6.25,0-5.43-8.72-6.09-8.72-11.52,0-3.62,2.3-8.23,0-11.52h2.14a19.65,19.65,0,0,0,4.11,6.25c0.82-1.64,0-.82,0-2.14,0-2.14-2.47-3.62-2.47-6.58s3.29-1.64,3.29-4.11a1.65,1.65,0,0,0-1.64-1.64c-3.78,0-3,5.26-3,8.23l-2.47-1.15c-1.64-3.46-1.32-6.58-4.94-6.58-0.66,0-1.15-1.32-1.15-1.65,0-1.48,1.15-2.3,1.15-3.78,0-7.9-9.38-12.83-9.38-19.75,0-1.48,2-2.14,2-3.62,0-2-1.15-1.65-1.15-3.29,0-4.93,3.29-6.75,3.29-11.19,0-2.8-1.32-3.78-1.65-6.09-0.49-5.92-5.43-5.59-5.43-10.69,0-3.95,4.61-7.08,6.58-9.05a16.2,16.2,0,0,0,4.17-9.13c0.49-3,3.24-4.36,3.24-8.64v-5.76a10.59,10.59,0,0,1,.88-3.29s0,0,0,0c-0.49-2.3-2-3.78-2-6.08,0-4.28,3.29-5.27,3.29-9,0-1.48-1.32-2.47-1.32-4.61,0-4.77,5.43-8.39,7.4-11,5.26-6.75,8.39-15.14,11.19-23.86,2.14-6.42,7.24-15.3,9.87-22.21,2.47-6.42,1.32-10.7,3-16.45,1.65-6.09,2.8-10.2,2.8-17.28,0-5.26,2-9.71,2-15.3,0-2.8-1.65-5.76-1.65-7.73,0-2.8,2-7.08,2.47-9.54,4.61,4.61,7.07,8.06,13.66,10.69,2.63,1,15.63,4.77,15.63,7.4,0,2.14-2.14,3.13-2.14,4.61,2.47-1.15,3.79-3,3.79-5.43,0-1.81-2.47-2.3-2.47-4.11,0-1.13,1-1.17,2-1.16,0,0,0,0,0,0h0.49c0-.12-0.34-0.07-0.47,0,0.66-.81,1.62-1.63,1.62-2.94,0-3.62-3.13-2.8-4.11-4.11l-1.64-9c0-.82,1.48-1.48,1.64-2L1117,1243c28.28,10.11,60.28,18.26,85.16,23.87,5,1.13,9.7,2.15,14,3.07,17.1,3.62,28.34,5.57,28.34,5.57,18.1,4.53,60.06,9.87,60.06,9.87,31.26,4.73,62.72,6.89,86.37,7.87,23.89,1,39.52.77,39.52,0.77,17.5,0.64,40.41.06,58.42-.64,16.72-.65,29.21-1.42,29.21-1.42l-0.92-9c8.06,0.82,5.1,9.54,7.9,13.16,1,1.32,15.63,4.44,17.28,4.44,3.79,0,3-4.44,7.4-4.44,3.95,0,7.24,7.73,11,7.73,1.32,0,1.15-1.15,3-1.15,4.28,0,5.59,4.94,9.38,4.94,4.61,0,5.76-4.44,9.54-4.94,0.49,1.48,2.14,1.64,3.62,1.64,1.22,0,2.47.28,4.22,0.31,3.21-.6,4.87.84,8.61,0.84,1.27,0,1.94-.77,2.8-1.15-2,6.25-10.37,7.57-15.63,11.52s-6.09,8.23-11,13.16c-3.29,3.29-7.9,4.28-9.54,8.89,8.23,0.82,16.45-3.62,22.21-9.38h3.29c0,3.79-2.47,5.1-4.94,6.58,0.49,1.64,4.28,2.47,6.58,2.47,5.93,0,7.4-6.75,15.3-7.73,0-1.15,4.44-3,5.76-4.61,4.61-5.76,8.56-10.53,15.63-14h2c-1.81,2.8-5.92,13.16-9,13.66v3.62c3.29-.82,3.62-4.44,7.9-4.44,3.29,0,6.25,2.47,8.23,4.44,0.66,0.66,1.32,4.11,3.29,4.11,8.39,0,13.16-6.25,20.07-8.56,2.31-.66,3.95.66,6.25,0,3.13-1,4.93-4.11,8.23-5.43v4.61s-1.32,1-1.32,1.64c0,2.8,10.53.82,12.84,2.47,3.62,2.63,6.09,3.62,10.2,6.58-1.65,2.8-11.35,1.15-14.81,1.64,0,1.65.33,3.29-1.65,3.29-2.3,0-3.79-2.14-7.4-2.14-3.78,0-5.26,3.46-7.73,3.78-2.3.33-5.92,0-7.07,1.65-1.48,2.14-1.15,5.76-4.61,5.76a25.4,25.4,0,0,0,.33-3.29c-0.33.17-3.78,4.44-4.77,4.44-3.46,0-7.4,7.4-7.4,12.83,0,6.42-6.09,8.56-6.09,14a5.47,5.47,0,0,0,0,1.65c1.65-.16,9.87-9,9.87-10.7,0-3.46.49-13.66,5.76-12-2.14,5.76-5.76,15.63-5.76,21.88v5.26c0,8.06-3.29,14.32-3.29,21.88,0,5.59,4.11,10,4.11,12.67v6.25c0,6,3.16,12.78,8.17,14.94a8.4,8.4,0,0,0,3.35.7c3,0,4.9-.42,6.25-1.24l35.83-6.15" />

<g id="flight1" mask="url(#flight1MasterMask)">
<path d="M1096.17,1546.65c31.12-31.73,177.69-168.86,386.59-168.86,211,0,358.35,70.5,387.47,85.59" transform="translate(0 0)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8" stroke-linecap="round" stroke-dasharray="0 16"/>

</g>
 
<g id="flight2" mask="url(#flight2MasterMask)">
<path  d="M1879.34,1479.28c-31.12,31.73-177.69,168.86-386.59,168.86-211,0-358.35-70.5-387.47-85.59" transform="translate(0 0)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8" stroke-linecap="round" stroke-dasharray="0 16"/>

</g>

<mask id="flight2MasterMask">
<path id="flight2Mask" d="M1885.51,1472.78S1729,1648.14,1492.75,1648.14,1100,1559.74,1100,1559.74" transform="translate(0 0)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="10"/>
</mask>

<mask id="flight1MasterMask">
<path id="flight1Mask" d="M1090,1553.14s156.52-175.36,392.75-175.36,392.75,88.41,392.75,88.41" transform="translate(0 0)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="10"/>
</mask>

<path id="airplane" d="M1057,1538.64l3.08-.7a5,5,0,0,0,3.13-2.62l9.37-22.24a14.07,14.07,0,0,0,4.92,1,0.53,0.53,0,0,0,.54-0.53v-6a0.53,0.53,0,0,0-.54-0.53,16.69,16.69,0,0,0-2.48.28l1.45-3.45a14.24,14.24,0,0,0,4.84,1,0.53,0.53,0,0,0,.54-0.53v-6a0.53,0.53,0,0,0-.54-0.53,16.65,16.65,0,0,0-2.39.26l2.41-5.73h11.06c10.48,0,19.81-3.41,19.81-7.62s-9.33-7.62-19.81-7.62H1081.3l-2.42-5.73a16.83,16.83,0,0,0,2.39.26,0.53,0.53,0,0,0,.55-0.53v-6a0.53,0.53,0,0,0-.54-0.53,14.19,14.19,0,0,0-4.84,1L1075,1462a16.69,16.69,0,0,0,2.48.28,0.53,0.53,0,0,0,.54-0.53v-6a0.53,0.53,0,0,0-.54-0.53,14.11,14.11,0,0,0-4.92,1l-9.37-22.24a5,5,0,0,0-3.13-2.62l-3.08-.7a0.36,0.36,0,0,0-.47.44l7.8,46.68c-11.84.9-22,2-29.34,3.17l-7.39-9.92a5.22,5.22,0,0,0-3-2l-1-.08a0.38,0.38,0,0,0-.42.52l3.84,13.09c-2.81.73-4.36,1.45-4.36,2.14s1.56,1.39,4.37,2.11l-3.85,13.12a0.38,0.38,0,0,0,.42.52l1-.08a5.22,5.22,0,0,0,3-2l7.43-10c7.35,1.15,17.53,2.25,29.3,3.18l-7.81,46.73A0.36,0.36,0,0,0,1057,1538.64Z" transform="translate(0 0)" fill="#1f242e"/>
	
<rect x="1517.39" y="1001" width="482.61" height="121.74"/>
 <text transform="translate(1582.84 1091.48)" font-size="68" fill="#fff" >Flight Paths</text>
</g>


  <g id="squiggly">
    <rect x="1000" width="1000" height="1000" fill="#9cb772"/>
    <rect x="1517.39" width="482.61" height="121.74"/>
    <text transform="translate(1560.55 90.48)" font-size="68" fill="#fff" >Squiggly Lines</text>
<path id="squigglyPath" mask="url(#squigglyMasterMask)" d="M1085.29,823.33l9.3-191.43c1.76-36.24,3.78-73.55,19.15-106.42s47.58-60.6,83.85-59.38c57.56,1.94,89.89,68.89,142.74,91.76,38,16.45,85.94,6.23,113.94-24.3s34-79.16,14.37-115.61c-28-51.86-93.32-68.57-151.56-77.57-33.48-5.17-70.74-11.57-91-38.7-25.81-34.49-8.73-87.58,25.75-113.41s80.12-30.62,123.2-30.58c62.2,0.05,128.39,10,175.34,50.76,53.25,46.28,70.16,125.17,54.63,194s-59,128.44-109.74,177.47c-35.28,34.1-75,64.75-101.33,106.18s-36.16,98.31-8.14,138.59c30.47,43.8,91.15,51.55,144.46,53.85,54.79,2.36,112.3,2.59,161-22.62,40.68-21.06,71.25-58.28,91.76-99.24s31.86-85.82,42-130.5c29.86-131.9,54.34-151.93,65.23-286.73,3-37.21,3.34-79.78-23.75-105.47-24.15-22.89-64.18-23.17-92.75-6.12s-46.56,48.11-54.94,80.31-8.28,65.92-8.12,99.19c0.42,88-3.16,62.06-2.74,150.09,0.18,37.23.18,75.47-13.16,110.24-28,73-119.31,114.34-192.63,87.26" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12" stroke-dasharray="12 24"/>

<mask id="squigglyMasterMask">
<path id="squigglyMask" d="M1085.29,823.33l9.3-191.43c1.76-36.24,3.78-73.55,19.15-106.42s47.58-60.6,83.85-59.38c57.56,1.94,89.89,68.89,142.74,91.76,38,16.45,85.94,6.23,113.94-24.3s34-79.16,14.37-115.61c-28-51.86-93.32-68.57-151.56-77.57-33.48-5.17-70.74-11.57-91-38.7-25.81-34.49-8.73-87.58,25.75-113.41s80.12-30.62,123.2-30.58c62.2,0.05,128.39,10,175.34,50.76,53.25,46.28,70.16,125.17,54.63,194s-59,128.44-109.74,177.47c-35.28,34.1-75,64.75-101.33,106.18s-36.16,98.31-8.14,138.59c30.47,43.8,91.15,51.55,144.46,53.85,54.79,2.36,112.3,2.59,161-22.62,40.68-21.06,71.25-58.28,91.76-99.24s31.86-85.82,42-130.5c29.86-131.9,54.34-151.93,65.23-286.73,3-37.21,3.34-79.78-23.75-105.47-24.15-22.89-64.18-23.17-92.75-6.12s-46.56,48.11-54.94,80.31-8.28,65.92-8.12,99.19c0.42,88-3.16,62.06-2.74,150.09,0.18,37.23.18,75.47-13.16,110.24-28,73-119.31,114.34-192.63,87.26" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14"/>
</mask>

<g id="pencil">
      <rect x="1075.96" y="758.82" width="79.83" height="13.12" transform="translate(-214.37 1013.22) rotate(-45)" fill="#fff"/>
      <rect x="1089.54" y="772.4" width="79.83" height="13.12" transform="translate(-219.99 1026.8) rotate(-45)" fill="#fff"/>
      <rect x="1103.12" y="785.97" width="79.83" height="13.12" transform="translate(-225.62 1040.37) rotate(-45)" fill="#fff"/>
      <path d="M1141.45,730.52L1177.89,767l8.61-8.61-36.43-36.43Zm38,25.61a2.65,2.65,0,1,1-3.75,0A2.65,2.65,0,0,1,1179.43,756.14Zm-13.58-13.58a2.65,2.65,0,1,1-3.75,0A2.65,2.65,0,0,1,1165.85,742.56ZM1152.27,729a2.65,2.65,0,1,1-3.75,0A2.65,2.65,0,0,1,1152.27,729Z" fill="#fff"/>
      <path d="M1076.2,828a3.67,3.67,0,0,0,4.19,4.19l35.9-3.65-36.43-36.43Zm11.45-7.26s6.28,0.39,8.32,5.63L1080.44,828l1.55-15.24A9,9,0,0,1,1087.65,820.76Z" fill="#fff"/>
      <path d="M1195.66,735.93l-23.18-23.18a9.37,9.37,0,0,0-13.25,0l-6.85,6.85L1188.81,756l6.85-6.85A9.37,9.37,0,0,0,1195.66,735.93Zm-6.85,12.81-29.15-29.15,3.21-3.21a4.22,4.22,0,0,1,6,0L1192,739.58a4.22,4.22,0,0,1,0,6Z" fill="#fff"/>
    </g>
  </g>

<g id="shapes">
    <rect y="1000" width="1000" height="1000" fill="url(#radial-gradient)"/>
    <rect x="516.89" y="1000" width="482.61" height="121.74"/>
    <text transform="translate(575.31 1091.48)" font-size="68" fill="#fff" >Basic Shapes</text>

    <polygon id="triangle"  mask="url(#triangleMasterMask)" points="500.73 1327.53 673.93 1627.53 327.52 1627.53 500.73 1327.53" fill="none" stroke="#009245" stroke-miterlimit="10" stroke-width="6" stroke-dasharray="12"/>
    <circle id="circle" mask="url(#circleMasterMask)" cx="500.73" cy="1525.06" r="275" fill="none" stroke="#6b1c1c" stroke-miterlimit="10" stroke-width="8" stroke-dasharray="12 12"/>
<mask id = "triangleMasterMask">
    <path id="triangleMask" d="M500.73,1327.53l173.21,300H327.52Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="10"/>
	</mask>
	<mask id = "circleMasterMask">
    <path id="circleMask" d="M775.73,1525.06c0,151.88-123.12,275-275,275s-275-123.12-275-275,123.12-275,275-275S775.73,1373.19,775.73,1525.06Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="36"/>
	</mask>
  </g>


</svg>


<div id="buttonWrap">
<h3>Zoom Controls</h3>
<button data-view = "0 0 2000 2000">Wide View</button>
<button data-view = "1000 0 1000 1000">Squiggly Lines</button>
<button data-view = "0 1000 1000 1000">Basic Shapes</button>
<button data-view = "1000 1000 1000 1000">Flight Paths</button>

</div>
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  	  font-family:'Oswald';	
}
#dashedDemo {

	font-family:'Oswald';
  overflow:hidden;
  position: absolute;
  left: 50%;
  top: 50%;

	}

#buttonWrap {
  height: 110px;
  width: 100%;
	text-align: center;
	background: #262626;
	padding: 20px;
	color: white;
  position: absolute;
  left: 50%;
  bottom: 0;
}

button {
	padding:6px;
	cursor: pointer;
}

h3 {
	line-height:1.5; 
	margin:5px 0;


}
console.clear();
const demo = document.querySelector("#dashedDemo");
const planeAnim = gsap.timeline({delay:1, repeat:-1, repeatDelay:0.5});
const pencilAnim = gsap.timeline({delay:1, repeat:-1, repeatDelay:0.4});
const shapeAnim = gsap.timeline({repeat:-1, repeatDelay:0.6});
const controls = document.querySelector("#buttonWrap");

gsap.set("#airplane", {xPercent:-50, yPercent:-50, transformOrigin:"center center"});
gsap.set("#pencil", {xPercent:-10, yPercent:-90, transformOrigin:"center center"});
gsap.set("#circleMask", {autoAlpha:0, drawSVG:"0% 0%"});
gsap.set("#pencil", {x:9, y:115});
gsap.set(demo, {xPercent:-50, yPercent:-50});
gsap.set(controls, {xPercent:-50})

//flight paths timeline
planeAnim
.fromTo("#flight1Mask", {drawSVG:"0% 0%"}, {duration: 5, drawSVG:"0% 100%" })
.to("#airplane", {duration:5, motionPath:{path:"#flight1Mask", align:"#flight1Mask",  autoRotate: true}}, 0)
.from("#airplane", {duration: 0.75, scale:0}, 0)
.to("#airplane", {duration: 1.5, scale:0}, 3.5)
.add("flyHome")
.fromTo("#flight2Mask", {drawSVG:"0% 0%"}, {duration: 5, drawSVG:"0% 100% " },"flyHome")
.to("#airplane", {duration:5, motionPath:{path:"#flight2Mask", align:"#flight2Mask",  autoRotate: true}}, "flyHome")
.to("#airplane", {duration: 0.75, scale:1},"flyHome")
.to("#airplane", 1.5, {duration: 1.5, scale:0},"flyHome+=3.5")
.to("#flight1Mask, #flight2Mask", {duration: 1, drawSVG:"0% 0%", opacity:0, rotation:0.01},"+=.5");

// squiggly line timeline
pencilAnim
.fromTo("#squigglyMask", {drawSVG:"0% 0%"}, {drawSVG:"0% 100% " ,duration: 5, yoyo:true, repeat:1, repeatDelay:0.5, ease:"power2.inOut"})
.to("#pencil ", {duration:5, ease:"power2.inOut", yoyo:true, repeat:1, repeatDelay:0.5, motionPath:{path:"#squigglyMask", align:"#squigglyMask"}}, 0)
.to("#pencil", {duration: 0.5, rotation:180, xPercent:-30},5)
.to("#pencil", {duration: 0.5, rotation:0, xPercent:-10});

// basic shapes timeline
shapeAnim
.fromTo("#triangleMask", {drawSVG:"50% 50%"}, {duration: 1, drawSVG:"0% 100% "})
.fromTo("#circleMask", {drawSVG:"0% 0%"}, {duration: 1, drawSVG:"0% 100%", autoAlpha:1})
.to("#triangle", {duration: 1, strokeWidth:12, stroke:"#fff"})
.to("#circle", {duration: 0.3, strokeWidth:0})
.to("#circle", {duration: 0.6, strokeWidth:30, stroke:"#000", ease:Bounce.easeOut})
.to("#circle", {duration: 0.75, strokeDasharray:"30 40", yoyo:true, repeat:1, repeatDelay:0.2})
.to("#circle", {duration: 1, transformOrigin:"center", strokeWidth:12, rotation:360, stroke:"purple"})
.add("erase")
.fromTo("#circleMask", {drawSVG:"0% 100%"}, {duration: 0.75, drawSVG:"50% 50% "},"erase+=1")
.to("#circle", {duration: 0.75, rotation:-180,},"erase+=1")
.fromTo("#triangleMask", {drawSVG:"0% 100%"}, {duration: 0.5, drawSVG:"50% 50% "});

//animate the viewBox controls
let triggers = document.querySelectorAll("button");
triggers.forEach((obj, i) => {
  obj.addEventListener("click", doCoolStuff);
});

function doCoolStuff() {
let moveTo = this.getAttribute("data-view");
gsap.to(demo, {duration: 1, attr:{viewBox:moveTo}, ease:"power3.inOut"});
}

function newSize() {
  let h = window.innerHeight;
  let w = window.innerWidth;
  if (w > h - 150) {
    gsap.set(demo, { height: h -150, width: h -150, y:-75});
  } else {
    gsap.set(demo, { width: w, height: w });
  }
}

newSize();
window.addEventListener("resize", newSize);
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Oswald

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js