Paper plane loop

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/motion-path/paper-plane-loop.html
  Desc   : Paper plane flying a loop-the-loop, banking into the turns
  ============================================================
-->
<div class="sg-paper-plane-loop" style="--sg-color:#7F77DD; --sg-size:280px;">
  <svg viewBox="0 0 200 120" aria-hidden="true" focusable="false">
    <path id="sg-paper-plane-loop-path" class="sg-paper-plane-loop-rail"
      d="M 10 82 C 40 58, 68 46, 96 54 C 128 64, 132 96, 110 94 C 88 92, 90 62, 116 50 C 138 40, 166 44, 192 58" />
    <g class="sg-paper-plane-loop-plane">
      <path d="M2 0 L-9 5 L-5.5 0 L-9 -5 Z" />
      <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
        <mpath href="#sg-paper-plane-loop-path" />
      </animateMotion>
    </g>
  </svg>
</div>
<style>
  .sg-paper-plane-loop {
    width: var(--sg-size);
  }
  .sg-paper-plane-loop svg {
    display: block;
    width: 100%;
  }
  .sg-paper-plane-loop-rail {
    fill: none;
    stroke: rgba(128, 128, 128, 0.4);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 5 7;
    animation: sg-paper-plane-loop-wake 1.6s linear infinite;
  }
  .sg-paper-plane-loop-plane path {
    fill: var(--sg-color);
    stroke: var(--sg-color);
    stroke-width: 1;
    stroke-linejoin: round;
  }
  @keyframes sg-paper-plane-loop-wake {
    to { stroke-dashoffset: -12; }
  }
</style>