Hourglass flip

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/loaders/hourglass-flip.html
  Desc   : Hourglass draining its sand, then flipping over
  ============================================================
-->
<div class="sg-hourglass-flip" style="--sg-color:#7F77DD; --sg-size:56px; --sg-duration:3s;">
  <svg viewBox="0 0 40 56" aria-hidden="true" focusable="false">
    <path class="sg-hourglass-flip-frame" d="M9 5 H31 L22 28 L31 51 H9 L18 28 Z" />
    <path class="sg-hourglass-flip-top" d="M13 11 L27 11 L20 26 Z" />
    <path class="sg-hourglass-flip-bottom" d="M13 48 L27 48 L20 34 Z" />
    <line class="sg-hourglass-flip-stream" x1="20" y1="28" x2="20" y2="46" />
  </svg>
</div>
<style>
  .sg-hourglass-flip {
    width: var(--sg-size);
  }
  .sg-hourglass-flip svg {
    display: block;
    width: 100%;
    transform-origin: 50% 50%;
    animation: sg-hourglass-flip-turn var(--sg-duration) ease-in-out infinite;
  }
  .sg-hourglass-flip-frame {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.5;
    stroke-linejoin: round;
  }
  .sg-hourglass-flip-top,
  .sg-hourglass-flip-bottom {
    fill: var(--sg-color);
    transform-box: fill-box;
    animation: sg-hourglass-flip-drain var(--sg-duration) linear infinite;
  }
  .sg-hourglass-flip-top { transform-origin: center bottom; }
  .sg-hourglass-flip-bottom {
    transform-origin: center bottom;
    animation-name: sg-hourglass-flip-pile;
  }
  .sg-hourglass-flip-stream {
    stroke: var(--sg-color);
    stroke-width: 2;
    stroke-dasharray: 3 4;
    animation: sg-hourglass-flip-trickle var(--sg-duration) linear infinite;
  }
  @keyframes sg-hourglass-flip-turn {
    0%, 80% { transform: rotate(0deg); }
    100%    { transform: rotate(180deg); }
  }
  @keyframes sg-hourglass-flip-drain {
    0%        { transform: scaleY(1); }
    75%, 100% { transform: scaleY(0); }
  }
  @keyframes sg-hourglass-flip-pile {
    0%        { transform: scaleY(0); }
    75%, 100% { transform: scaleY(1); }
  }
  @keyframes sg-hourglass-flip-trickle {
    0%   { stroke-dashoffset: 28; opacity: 1; }
    75%  { stroke-dashoffset: 0;  opacity: 1; }
    78%, 100% { opacity: 0; }
  }
</style>