spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/motion-path/bee-flight.html7  Desc   : Erratic bee flight — darts and hovers paced with keyPoints/keyTimes8  ============================================================9-->10<!--svgarden11title: Bee flight12slug: bee-flight13category: motion-path14tags: [motion, smil, bee, pacing]15difficulty: advanced16techniques: [animateMotion, keyPoints, keyTimes, rotate-auto]17how_it_works: >18  A plain <animateMotion> moves at constant speed, which reads as mechanical —19  real insects dart and hover. keyPoints/keyTimes decouple distance from time:20  keyPoints says how far along the path (0–1) the bee is at each keyTimes21  moment, so a big keyPoints jump inside a small keyTimes slice is a dart, and22  a near-zero jump over a long slice is a hover at a flower. calcMode="linear"23  keeps each segment steady so the contrast does the acting. The wings are a24  separate 90 ms CSS flutter — two timescales layered on one element sell the25  illusion.26customizable:27  - { var: "--sg-color",  label: "Bee",     type: color, default: "#EFBB33" }28  - { var: "--sg-flower", label: "Flowers", type: color, default: "#7F77DD" }29  - { var: "--sg-size",   label: "Size",    type: range, min: 160, max: 440, default: 260, unit: px }30created: 2026-08-1031-->32<div class="sg-bee-flight" style="--sg-color:#EFBB33; --sg-flower:#7F77DD; --sg-size:260px;">33  <svg viewBox="0 0 200 130" aria-hidden="true" focusable="false">34    <path id="sg-bee-flight-route" class="sg-bee-flight-route"35      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" />36    <g class="sg-bee-flight-flower"><circle cx="97" cy="55" r="4" /><circle cx="171" cy="55" r="4" /></g>37    <g class="sg-bee-flight-bee">38      <g class="sg-bee-flight-wings">39        <ellipse cx="-1.5" cy="-4.5" rx="3" ry="4" />40        <ellipse cx="2.5" cy="-4.5" rx="3" ry="4" />41      </g>42      <ellipse class="sg-bee-flight-body" cx="0" cy="0" rx="6" ry="4" />43      <path class="sg-bee-flight-stripes" d="M-2 -3.8 V3.8 M2 -3.8 V3.8" />44      <circle class="sg-bee-flight-eye" cx="5" cy="-1.2" r="0.9" />45      <animateMotion46        dur="9s" repeatCount="indefinite" rotate="auto" calcMode="linear"47        keyPoints="0; 0.3; 0.34; 0.62; 0.66; 0.9; 1"48        keyTimes="0; 0.1; 0.42; 0.52; 0.82; 0.92; 1">49        <mpath href="#sg-bee-flight-route" />50      </animateMotion>51    </g>52  </svg>53</div>54<style>55  .sg-bee-flight {56    width: var(--sg-size);57  }58  .sg-bee-flight svg {59    display: block;60    width: 100%;61  }62  .sg-bee-flight-route {63    fill: none;64    stroke: rgba(128, 128, 128, 0.3);65    stroke-width: 1;66    stroke-dasharray: 1.5 4;67  }68  .sg-bee-flight-flower circle {69    fill: var(--sg-flower);70    opacity: 0.8;71  }72  .sg-bee-flight-body {73    fill: var(--sg-color);74  }75  .sg-bee-flight-stripes {76    stroke: rgba(40, 40, 40, 0.75);77    stroke-width: 1.4;78    fill: none;79  }80  .sg-bee-flight-eye {81    fill: rgba(40, 40, 40, 0.75);82  }83  .sg-bee-flight-wings ellipse {84    fill: rgba(128, 128, 128, 0.4);85    transform-box: fill-box;86    transform-origin: center bottom;87    animation: sg-bee-flight-flutter 0.09s ease-in-out infinite alternate;88  }89  .sg-bee-flight-wings ellipse:nth-of-type(2) {90    animation-delay: 0.045s;91  }92  @keyframes sg-bee-flight-flutter {93    from { transform: scaleY(1); }94    to   { transform: scaleY(0.45) rotate(8deg); }95  }96</style>97