Bee flight

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/motion-path/bee-flight.html
  Desc   : Erratic bee flight — darts and hovers paced with keyPoints/keyTimes
  ============================================================
-->
<div class="sg-bee-flight" style="--sg-color:#EFBB33; --sg-flower:#7F77DD; --sg-size:260px;">
  <svg viewBox="0 0 200 130" aria-hidden="true" focusable="false">
    <path id="sg-bee-flight-route" class="sg-bee-flight-route"
      d="M 20 100 C 40 60, 70 40, 96 52 C 118 62, 118 84, 100 92 C 130 98, 160 84, 172 56 C 178 42, 160 30, 140 38 C 100 26, 46 34, 20 100" />
    <g class="sg-bee-flight-flower"><circle cx="97" cy="55" r="4" /><circle cx="171" cy="55" r="4" /></g>
    <g class="sg-bee-flight-bee">
      <g class="sg-bee-flight-wings">
        <ellipse cx="-1.5" cy="-4.5" rx="3" ry="4" />
        <ellipse cx="2.5" cy="-4.5" rx="3" ry="4" />
      </g>
      <ellipse class="sg-bee-flight-body" cx="0" cy="0" rx="6" ry="4" />
      <path class="sg-bee-flight-stripes" d="M-2 -3.8 V3.8 M2 -3.8 V3.8" />
      <circle class="sg-bee-flight-eye" cx="5" cy="-1.2" r="0.9" />
      <animateMotion
        dur="9s" repeatCount="indefinite" rotate="auto" calcMode="linear"
        keyPoints="0; 0.3; 0.34; 0.62; 0.66; 0.9; 1"
        keyTimes="0; 0.1; 0.42; 0.52; 0.82; 0.92; 1">
        <mpath href="#sg-bee-flight-route" />
      </animateMotion>
    </g>
  </svg>
</div>
<style>
  .sg-bee-flight {
    width: var(--sg-size);
  }
  .sg-bee-flight svg {
    display: block;
    width: 100%;
  }
  .sg-bee-flight-route {
    fill: none;
    stroke: rgba(128, 128, 128, 0.3);
    stroke-width: 1;
    stroke-dasharray: 1.5 4;
  }
  .sg-bee-flight-flower circle {
    fill: var(--sg-flower);
    opacity: 0.8;
  }
  .sg-bee-flight-body {
    fill: var(--sg-color);
  }
  .sg-bee-flight-stripes {
    stroke: rgba(40, 40, 40, 0.75);
    stroke-width: 1.4;
    fill: none;
  }
  .sg-bee-flight-eye {
    fill: rgba(40, 40, 40, 0.75);
  }
  .sg-bee-flight-wings ellipse {
    fill: rgba(128, 128, 128, 0.4);
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: sg-bee-flight-flutter 0.09s ease-in-out infinite alternate;
  }
  .sg-bee-flight-wings ellipse:nth-of-type(2) {
    animation-delay: 0.045s;
  }
  @keyframes sg-bee-flight-flutter {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.45) rotate(8deg); }
  }
</style>