נרות שבת

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

סצנת SVG מונפשת · יהדות · שבת · חג · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 120" width="100%" role="img"
     aria-label="נרות שבת">
  <style>
    .sb-f { animation: sb-flicker 1.4s ease-in-out infinite; transform-origin: center bottom }
    .sb-f2 { animation-delay: .55s }
    .sb-glow { animation: sb-glow 2.6s ease-in-out infinite }
    @keyframes sb-flicker { 0%,100% { transform: scale(1) } 50% { transform: scale(1.16) } }
    @keyframes sb-glow { 0%,100% { opacity: .16 } 50% { opacity: .36 } }
  </style>
  <rect width="140" height="120" fill="#1c1917"/>
  <circle class="sb-glow" cx="50" cy="40" r="26" fill="#fbbf24"/>
  <circle class="sb-glow" cx="90" cy="40" r="26" fill="#fbbf24"/>
  <g fill="#fef3c7">
    <path class="sb-f" d="M50 44c5-4 6-9 3-14-1 3-3 4-5 3 2 4 0 7-3 8 0 2 2 3 5 3z" style="transform-origin:50px 47px"/>
    <path class="sb-f sb-f2" d="M90 44c5-4 6-9 3-14-1 3-3 4-5 3 2 4 0 7-3 8 0 2 2 3 5 3z" style="transform-origin:90px 47px"/>
  </g>
  <rect x="46" y="46" width="8" height="34" rx="2" fill="#f8fafc"/>
  <rect x="86" y="46" width="8" height="34" rx="2" fill="#f8fafc"/>
  <path d="M40 80h20l-4 8H44z" fill="#a16207"/>
  <path d="M80 80h20l-4 8H84z" fill="#a16207"/>
  <rect x="34" y="88" width="72" height="7" rx="3.5" fill="#78350f"/>
</svg>