חנוכייה

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

סצנת SVG מונפשת · חג · חנוכה · ישראלי · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 130" width="100%" role="img"
     aria-label="חנוכייה">
  <style>
    .hn-f { transform-origin: center bottom; animation: hn-flick 1.1s ease-in-out infinite, hn-on .6s ease-out both }
    .hn-f2 { animation-delay: 0s, .5s } .hn-f3 { animation-delay: .1s, 1s }
    .hn-f4 { animation-delay: .2s, 1.5s } .hn-f5 { animation-delay: .3s, 2s }
    .hn-f6 { animation-delay: .15s, 2.5s } .hn-f7 { animation-delay: .25s, 3s }
    .hn-f8 { animation-delay: .05s, 3.5s } .hn-f9 { animation-delay: .35s, 4s }
    @keyframes hn-flick { 50% { transform: scaleY(1.22) scaleX(.9) } }
    @keyframes hn-on { from { opacity: 0; transform: scale(.2) } }
  </style>
  <rect width="200" height="130" fill="#0b1220"/>
  <path d="M100 44v52" stroke="#fbbf24" stroke-width="5"/>
  <path d="M40 62c0-14 12-18 20-18M160 62c0-14-12-18-20-18" stroke="#fbbf24" stroke-width="4" fill="none"/>
  <path d="M40 62h120" stroke="#fbbf24" stroke-width="4"/>
  <path d="M70 96h60v8H70z" fill="#f59e0b"/>
  <rect x="82" y="104" width="36" height="8" rx="2" fill="#fbbf24"/>
  <rect x="21.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f1" cx="24" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="39.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f2" cx="42" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="57.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f3" cx="60" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="75.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f4" cx="78" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="97.5" y="30" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f5" cx="100" cy="25" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="119.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f6" cx="122" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="137.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f7" cx="140" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="155.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f8" cx="158" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
  <rect x="173.5" y="46" width="5" height="16" rx="1.5" fill="#e2e8f0"/>
  <ellipse class="hn-f hn-f9" cx="176" cy="41" rx="3.4" ry="6" fill="#fcd34d"/>
</svg>