שעון חול

שעון חול הוא סצנת SVG מונפשת מתוך סצנות מונפשות של כליקס. מה שמורידים הוא קובץ SVG שההנפשה שלו כתובה בתוכו, ולכן הוא עובד גם כתגית img. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בזמן, המתנה ו-SVG. באותה סדרה יש גם מכונית נוסעת, עץ חג מולד וחנוכייה.

סצנת SVG מונפשת · זמן · המתנה · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140" width="100%" role="img"
     aria-label="שעון חול">
  <style>
    .hg { animation: hg-turn 6s ease-in-out infinite; transform-origin: 50px 70px }
    .hg-top { animation: hg-drain 6s linear infinite }
    .hg-bot { animation: hg-fill 6s linear infinite }
    .hg-fall { animation: hg-fall 6s linear infinite }
    @keyframes hg-turn { 0%,88% { transform: rotate(0) } 96%,100% { transform: rotate(180deg) } }
    @keyframes hg-drain { 0% { transform: scaleY(1); opacity: 1 } 85%,100% { transform: scaleY(0); opacity: 1 } }
    @keyframes hg-fill { 0% { transform: scaleY(0) } 85%,100% { transform: scaleY(1) } }
    @keyframes hg-fall { 0%,85% { opacity: 1 } 86%,100% { opacity: 0 } }
  </style>
  <rect width="100" height="140" fill="#0f172a"/>
  <clipPath id="hgclip"><path d="M28 23h44L54 70l18 47H28l18-47z"/></clipPath>
  <g class="hg">
    <rect x="20" y="16" width="60" height="7" rx="3.5" fill="#a16207"/>
    <rect x="20" y="117" width="60" height="7" rx="3.5" fill="#a16207"/>
    <path d="M28 23h44L54 70l18 47H28l18-47z" fill="#1e293b" stroke="#94a3b8" stroke-width="2.5"/>
    <g clip-path="url(#hgclip)">
      <rect class="hg-top" x="30" y="26" width="40" height="30" fill="#fbbf24" style="transform-origin:50px 26px"/>
      <rect class="hg-bot" x="30" y="86" width="40" height="28" fill="#fbbf24" style="transform-origin:50px 114px"/>
    </g>
    <rect class="hg-fall" x="49" y="66" width="2.5" height="26" fill="#fbbf24"/>
  </g>
</svg>