spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/loaders/hourglass-flip.html7  Desc   : Hourglass draining its sand, then flipping over8  ============================================================9-->10<!--svgarden11title: Hourglass flip12slug: hourglass-flip13category: loaders14tags: [loader, hourglass, flip, multi-animation]15difficulty: advanced16techniques: ["@keyframes", scaleY, rotate, stroke-dasharray, animation-choreography]17how_it_works: >18  Three animations share one timeline: the top sand scaleY-shrinks toward the19  neck, the bottom pile grows from the floor, and a dashed stream trickles20  between them for the first 80% of the cycle. In the final 20% the whole SVG21  rotates 180°. Because the drained hourglass is the mirror of the full one,22  the rotation lands exactly on the first frame and the infinite loop is23  seamless — choreography, not trickery.24customizable:25  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }26  - { var: "--sg-size",     label: "Size",  type: range, min: 32, max: 140, default: 56, unit: px }27  - { var: "--sg-duration", label: "Speed", type: range, min: 1.5, max: 8, step: 0.5, default: 3, unit: s }28created: 2026-08-1029-->30<div class="sg-hourglass-flip" style="--sg-color:#7F77DD; --sg-size:56px; --sg-duration:3s;">31  <svg viewBox="0 0 40 56" aria-hidden="true" focusable="false">32    <path class="sg-hourglass-flip-frame" d="M9 5 H31 L22 28 L31 51 H9 L18 28 Z" />33    <path class="sg-hourglass-flip-top" d="M13 11 L27 11 L20 26 Z" />34    <path class="sg-hourglass-flip-bottom" d="M13 48 L27 48 L20 34 Z" />35    <line class="sg-hourglass-flip-stream" x1="20" y1="28" x2="20" y2="46" />36  </svg>37</div>38<style>39  .sg-hourglass-flip {40    width: var(--sg-size);41  }42  .sg-hourglass-flip svg {43    display: block;44    width: 100%;45    transform-origin: 50% 50%;46    animation: sg-hourglass-flip-turn var(--sg-duration) ease-in-out infinite;47  }48  .sg-hourglass-flip-frame {49    fill: none;50    stroke: var(--sg-color);51    stroke-width: 2.5;52    stroke-linejoin: round;53  }54  .sg-hourglass-flip-top,55  .sg-hourglass-flip-bottom {56    fill: var(--sg-color);57    transform-box: fill-box;58    animation: sg-hourglass-flip-drain var(--sg-duration) linear infinite;59  }60  .sg-hourglass-flip-top { transform-origin: center bottom; }61  .sg-hourglass-flip-bottom {62    transform-origin: center bottom;63    animation-name: sg-hourglass-flip-pile;64  }65  .sg-hourglass-flip-stream {66    stroke: var(--sg-color);67    stroke-width: 2;68    stroke-dasharray: 3 4;69    animation: sg-hourglass-flip-trickle var(--sg-duration) linear infinite;70  }71  @keyframes sg-hourglass-flip-turn {72    0%, 80% { transform: rotate(0deg); }73    100%    { transform: rotate(180deg); }74  }75  @keyframes sg-hourglass-flip-drain {76    0%        { transform: scaleY(1); }77    75%, 100% { transform: scaleY(0); }78  }79  @keyframes sg-hourglass-flip-pile {80    0%        { transform: scaleY(0); }81    75%, 100% { transform: scaleY(1); }82  }83  @keyframes sg-hourglass-flip-trickle {84    0%   { stroke-dashoffset: 28; opacity: 1; }85    75%  { stroke-dashoffset: 0;  opacity: 1; }86    78%, 100% { opacity: 0; }87  }88</style>89