spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/motion-path/paper-plane-loop.html7  Desc   : Paper plane flying a loop-the-loop, banking into the turns8  ============================================================9-->10<!--svgarden11title: Paper plane loop12slug: paper-plane-loop13category: motion-path14tags: [motion, smil, plane, loop]15difficulty: advanced16techniques: [animateMotion, rotate-auto, mpath, stroke-dashoffset]17how_it_works: >18  SMIL's <animateMotion> drags the plane along a bézier flight path, and the19  one attribute doing the heavy lifting is rotate="auto": it continuously20  re-orients the element to the path's tangent, so the plane banks into the21  loop and exits nose-first instead of sliding sideways like a fridge magnet.22  The <mpath> child references the same path that is drawn as the dashed rail,23  so flight and artwork can never drift apart. A slow dashoffset animation on24  the rail suggests the airflow direction. Because the plane is drawn pointing25  along +x, "auto" needs no extra angle correction.26customizable:27  - { var: "--sg-color", label: "Plane", type: color, default: "#7F77DD" }28  - { var: "--sg-size",  label: "Width", type: range, min: 160, max: 460, default: 280, unit: px }29created: 2026-08-1030-->31<div class="sg-paper-plane-loop" style="--sg-color:#7F77DD; --sg-size:280px;">32  <svg viewBox="0 0 200 120" aria-hidden="true" focusable="false">33    <path id="sg-paper-plane-loop-path" class="sg-paper-plane-loop-rail"34      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" />35    <g class="sg-paper-plane-loop-plane">36      <path d="M2 0 L-9 5 L-5.5 0 L-9 -5 Z" />37      <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">38        <mpath href="#sg-paper-plane-loop-path" />39      </animateMotion>40    </g>41  </svg>42</div>43<style>44  .sg-paper-plane-loop {45    width: var(--sg-size);46  }47  .sg-paper-plane-loop svg {48    display: block;49    width: 100%;50  }51  .sg-paper-plane-loop-rail {52    fill: none;53    stroke: rgba(128, 128, 128, 0.4);54    stroke-width: 1.4;55    stroke-linecap: round;56    stroke-dasharray: 5 7;57    animation: sg-paper-plane-loop-wake 1.6s linear infinite;58  }59  .sg-paper-plane-loop-plane path {60    fill: var(--sg-color);61    stroke: var(--sg-color);62    stroke-width: 1;63    stroke-linejoin: round;64  }65  @keyframes sg-paper-plane-loop-wake {66    to { stroke-dashoffset: -12; }67  }68</style>69