Drone Hover

<div class="hln-drone-hover" role="img" aria-label="A drone lifting off and hovering">
  <svg viewBox="-110 -60 220 120" aria-hidden="true">
    <g transform="translate(0 4.3) scale(.99)">
      <polygon class="hln-drone-hover-l" points="37,-1.5 37.53,-1.18 37.92,-0.81 38.16,-0.41 38.24,0 38.16,0.41 37.92,0.81 37.53,1.18 37,1.5 3,18.5 2.36,18.76 1.62,18.96 0.83,19.08 0,19.12 -0.83,19.08 -1.62,18.96 -2.36,18.76 -3,18.5 -37,1.5 -37.53,1.18 -37.92,0.81 -38.16,0.41 -38.24,0 -38.16,-0.41 -37.92,-0.81 -37.53,-1.18 -37,-1.5 -3,-18.5 -2.36,-18.76 -1.62,-18.96 -0.83,-19.08 0,-19.12 0.83,-19.08 1.62,-18.96 2.36,-18.76 3,-18.5"/>
      <polygon class="hln-drone-hover-l" points="22,-1 22.35,-0.79 22.61,-0.54 22.77,-0.28 22.83,0 22.77,0.28 22.61,0.54 22.35,0.79 22,1 2,11 1.57,11.18 1.08,11.31 0.55,11.39 0,11.41 -0.55,11.39 -1.08,11.31 -1.57,11.18 -2,11 -22,1 -22.35,0.79 -22.61,0.54 -22.77,0.28 -22.83,0 -22.77,-0.28 -22.61,-0.54 -22.35,-0.79 -22,-1 -2,-11 -1.57,-11.18 -1.08,-11.31 -0.55,-11.39 0,-11.41 0.55,-11.39 1.08,-11.31 1.57,-11.18 2,-11"/>
      <g class="hln-drone-hover-fly"><g><path d="M-1.27,-11 V-7 A1.27,0.64 0 0 0 1.27,-7 V-11 Z"/><ellipse cx="0" cy="-11" rx="1.27" ry="0.64"/></g><g><path d="M12.73,-4 V0 A1.27,0.64 0 0 0 15.27,0 V-4 Z"/><ellipse cx="14" cy="-4" rx="1.27" ry="0.64"/></g><g><path d="M-15.27,-4 V0 A1.27,0.64 0 0 0 -12.73,0 V-4 Z"/><ellipse cx="-14" cy="-4" rx="1.27" ry="0.64"/></g><g><path d="M-1.27,3 V7 A1.27,0.64 0 0 0 1.27,7 V3 Z"/><ellipse cx="0" cy="3" rx="1.27" ry="0.64"/></g><g><path d="M-28.81,-22 V-17 A4.81,2.4 0 0 0 -19.19,-17 V-22 Z"/><ellipse cx="-24" cy="-22" rx="4.81" ry="2.4"/></g><g><path d="M19.19,-22 V-17 A4.81,2.4 0 0 0 28.81,-17 V-22 Z"/><ellipse cx="24" cy="-22" rx="4.81" ry="2.4"/></g><g><polygon points="-22.1,-15.55 -12.5,-10.75 -12.5,-12.75 -22.1,-17.55"/><polygon points="-9.5,-12.25 -12.5,-10.75 -12.5,-12.75 -9.5,-14.25"/><polygon points="-19.1,-19.05 -9.5,-14.25 -12.5,-12.75 -22.1,-17.55"/></g><g><polygon points="9.5,-12.25 12.5,-10.75 12.5,-12.75 9.5,-14.25"/><polygon points="22.1,-15.55 12.5,-10.75 12.5,-12.75 22.1,-17.55"/><polygon points="19.1,-19.05 22.1,-17.55 12.5,-12.75 9.5,-14.25"/></g><g><polygon points="-19.66,-10 -19.55,-10.55 -19.23,-11.08 -18.7,-11.57 -18,-12 -4,-19 -3.14,-19.35 -2.16,-19.61 -1.1,-19.77 0,-19.83 1.1,-19.77 2.16,-19.61 3.14,-19.35 4,-19 18,-12 18.7,-11.57 19.23,-11.08 19.55,-10.55 19.66,-10 19.66,-4 19.55,-3.45 19.23,-2.92 18.7,-2.43 18,-2 4,5 3.14,5.35 2.16,5.61 1.1,5.77 0,5.83 -1.1,5.77 -2.16,5.61 -3.14,5.35 -4,5 -18,-2 -18.7,-2.43 -19.23,-2.92 -19.55,-3.45 -19.66,-4"/><polygon points="18,-12 18.7,-11.57 19.23,-11.08 19.55,-10.55 19.66,-10 19.55,-9.45 19.23,-8.92 18.7,-8.43 18,-8 4,-1 3.14,-0.65 2.16,-0.39 1.1,-0.23 0,-0.17 -1.1,-0.23 -2.16,-0.39 -3.14,-0.65 -4,-1 -18,-8 -18.7,-8.43 -19.23,-8.92 -19.55,-9.45 -19.66,-10 -19.55,-10.55 -19.23,-11.08 -18.7,-11.57 -18,-12 -4,-19 -3.14,-19.35 -2.16,-19.61 -1.1,-19.77 0,-19.83 1.1,-19.77 2.16,-19.61 3.14,-19.35 4,-19"/></g><g><polygon points="-10.24,-12 -10.16,-12.41 -9.92,-12.81 -9.53,-13.18 -9,-13.5 -3,-16.5 -2.36,-16.76 -1.62,-16.96 -0.83,-17.08 0,-17.12 0.83,-17.08 1.62,-16.96 2.36,-16.76 3,-16.5 9,-13.5 9.53,-13.18 9.92,-12.81 10.16,-12.41 10.24,-12 10.24,-10 10.16,-9.59 9.92,-9.19 9.53,-8.82 9,-8.5 3,-5.5 2.36,-5.24 1.62,-5.04 0.83,-4.92 0,-4.88 -0.83,-4.92 -1.62,-5.04 -2.36,-5.24 -3,-5.5 -9,-8.5 -9.53,-8.82 -9.92,-9.19 -10.16,-9.59 -10.24,-10"/><polygon points="9,-13.5 9.53,-13.18 9.92,-12.81 10.16,-12.41 10.24,-12 10.16,-11.59 9.92,-11.19 9.53,-10.82 9,-10.5 3,-7.5 2.36,-7.24 1.62,-7.04 0.83,-6.92 0,-6.88 -0.83,-6.92 -1.62,-7.04 -2.36,-7.24 -3,-7.5 -9,-10.5 -9.53,-10.82 -9.92,-11.19 -10.16,-11.59 -10.24,-12 -10.16,-12.41 -9.92,-12.81 -9.53,-13.18 -9,-13.5 -3,-16.5 -2.36,-16.76 -1.62,-16.96 -0.83,-17.08 0,-17.12 0.83,-17.08 1.62,-16.96 2.36,-16.76 3,-16.5"/></g><g transform="matrix(1 -.5 0 -1 7 3.5)"><circle class="hln-drone-hover-af" cx="4" cy="3" r="0.9"/><line class="hln-drone-hover-l" x1="1.5" y1="3" x2="2.5" y2="3"/></g><g><polygon points="9.5,0.25 19.1,5.05 19.1,3.05 9.5,-1.75"/><polygon points="22.1,3.55 19.1,5.05 19.1,3.05 22.1,1.55"/><polygon points="12.5,-3.25 22.1,1.55 19.1,3.05 9.5,-1.75"/></g><g><polygon points="-22.1,3.55 -19.1,5.05 -19.1,3.05 -22.1,1.55"/><polygon points="-9.5,0.25 -19.1,5.05 -19.1,3.05 -9.5,-1.75"/><polygon points="-12.5,-3.25 -9.5,-1.75 -19.1,3.05 -22.1,1.55"/></g><g><path d="M19.19,2 V7 A4.81,2.4 0 0 0 28.81,7 V2 Z"/><ellipse cx="24" cy="2" rx="4.81" ry="2.4"/></g><g><path d="M-28.81,2 V7 A4.81,2.4 0 0 0 -19.19,7 V2 Z"/><ellipse cx="-24" cy="2" rx="4.81" ry="2.4"/></g><g transform="matrix(1 .5 -1 .5 -24 -22.6)"><g class="hln-drone-hover-rot"><rect x="-9" y="-1.1" width="18" height="2.2" rx="1.1"/><circle cx="0" cy="0" r="1.6"/></g></g><g transform="matrix(1 .5 -1 .5 24 -22.6)"><g class="hln-drone-hover-rot hln-drone-hover-ccw"><rect x="-9" y="-1.1" width="18" height="2.2" rx="1.1"/><circle cx="0" cy="0" r="1.6"/></g></g><g transform="matrix(1 .5 -1 .5 24 1.4)"><g class="hln-drone-hover-rot"><rect x="-9" y="-1.1" width="18" height="2.2" rx="1.1"/><circle cx="0" cy="0" r="1.6"/></g></g><g transform="matrix(1 .5 -1 .5 -24 1.4)"><g class="hln-drone-hover-rot hln-drone-hover-ccw"><rect x="-9" y="-1.1" width="18" height="2.2" rx="1.1"/><circle cx="0" cy="0" r="1.6"/></g></g></g>
    </g>
  </svg>
</div>

.hln-drone-hover {
  --c: var(--hln-color, #ff4f2e);
  font-size: var(--hln-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 0.75em;
  background: #f6f5f1;
  overflow: hidden;
}
.hln-drone-hover svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-drone-hover svg * {
  vector-effect: non-scaling-stroke;
}
.hln-drone-hover .hln-drone-hover-l {
  stroke: #9a9ca3;
}
.hln-drone-hover .hln-drone-hover-af {
  fill: var(--c);
  stroke: var(--c);
}
.hln-drone-hover .hln-drone-hover-fly {
  transform: matrix(1, 0, 0, 1, 0, -16);
  animation: hln-drone-hover-lift 6s infinite;
}
.hln-drone-hover .hln-drone-hover-rot {
  animation: hln-drone-hover-spin 0.5s linear infinite;
}
.hln-drone-hover .hln-drone-hover-ccw {
  animation-direction: reverse;
}
@keyframes hln-drone-hover-spin {
  to { transform: rotate(360deg); }
}
@keyframes hln-drone-hover-lift {
  0% { transform: matrix(1, 0, 0, 1, 0, 0); }
  10% { transform: matrix(1, 0, 0, 1, 0, 0); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  35% { transform: matrix(1, 0, 0, 1, 0, -16); }
  76.67% { transform: matrix(1, 0, 0, 1, 0, -16); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  91.67% { transform: matrix(1, 0, 0, 1, 0, 0); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-drone-hover * {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-drone-hover, .hln-drone-hover *, .hln-drone-hover::before, .hln-drone-hover::after, .hln-drone-hover *::before, .hln-drone-hover *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar hairline animations