סוכה

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120" width="100%" role="img"
     aria-label="סוכה">
  <style>
    .sk-fruit { animation: sk-sway 3.4s ease-in-out infinite; transform-origin: top center }
    .sk-fruit2 { animation-delay: .8s }
    .sk-fruit3 { animation-delay: 1.6s }
    @keyframes sk-sway { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
  </style>
  <rect width="180" height="120" fill="#0f172a"/>
  <rect x="30" y="40" width="120" height="66" fill="#7c2d12" opacity=".35"/>
  <rect x="28" y="34" width="124" height="8" rx="3" fill="#a16207"/>
  <g stroke="#4d7c0f" stroke-width="5" stroke-linecap="round">
    <path d="M36 34l10-14"/><path d="M56 34l10-14"/><path d="M76 34l10-14"/>
    <path d="M96 34l10-14"/><path d="M116 34l10-14"/><path d="M136 34l10-14"/>
  </g>
  <rect x="28" y="42" width="7" height="64" rx="2" fill="#a16207"/>
  <rect x="145" y="42" width="7" height="64" rx="2" fill="#a16207"/>
  <g class="sk-fruit" style="transform-origin:62px 42px">
    <path d="M62 42v8" stroke="#65a30d" stroke-width="2"/>
    <circle cx="62" cy="56" r="7" fill="#dc2626"/>
  </g>
  <g class="sk-fruit sk-fruit2" style="transform-origin:90px 42px">
    <path d="M90 42v10" stroke="#65a30d" stroke-width="2"/>
    <ellipse cx="90" cy="60" rx="6" ry="8" fill="#f59e0b"/>
  </g>
  <g class="sk-fruit sk-fruit3" style="transform-origin:118px 42px">
    <path d="M118 42v8" stroke="#65a30d" stroke-width="2"/>
    <circle cx="118" cy="56" r="7" fill="#a855f7"/>
  </g>
  <rect x="24" y="104" width="132" height="6" rx="3" fill="#1e293b"/>
</svg>