סיר על האש

סיר על האש הוא סצנת 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>
    .cp-steam { animation: cp-rise 2.6s ease-in-out infinite; opacity: 0 }
    .cp-steam2 { animation-delay: .9s }
    .cp-steam3 { animation-delay: 1.8s }
    .cp-fire { animation: cp-fire 1.1s ease-in-out infinite; transform-origin: center bottom }
    .cp-lid { animation: cp-lid 2.2s ease-in-out infinite }
    @keyframes cp-rise { 0% { opacity: 0; transform: translateY(6px) } 40% { opacity: .8 } 100% { opacity: 0; transform: translateY(-20px) } }
    @keyframes cp-fire { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(1.3) } }
    @keyframes cp-lid { 0%,100% { transform: translateY(0) } 45% { transform: translateY(-3px) rotate(-2deg) } }
  </style>
  <rect width="140" height="120" fill="#0f172a"/>
  <g stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" fill="none">
    <path class="cp-steam" d="M56 34v-12"/>
    <path class="cp-steam cp-steam2" d="M70 34v-12"/>
    <path class="cp-steam cp-steam3" d="M84 34v-12"/>
  </g>
  <g class="cp-lid" style="transform-origin:70px 46px">
    <rect x="36" y="40" width="68" height="7" rx="3.5" fill="#94a3b8"/>
    <rect x="65" y="32" width="10" height="9" rx="4" fill="#64748b"/>
  </g>
  <path d="M36 50h68v26a12 12 0 0 1-12 12H48a12 12 0 0 1-12-12z" fill="#475569"/>
  <rect x="26" y="54" width="12" height="7" rx="3.5" fill="#64748b"/>
  <rect x="102" y="54" width="12" height="7" rx="3.5" fill="#64748b"/>
  <g class="cp-fire" style="transform-origin:70px 104px">
    <path d="M58 104c0-8 8-10 6-18 6 4 8 8 8 12 2-2 3-5 3-8 4 4 7 9 7 14z" fill="#f97316"/>
    <path d="M64 104c0-5 5-6 4-11 4 3 6 6 6 9 1-1 2-3 2-5 2 3 4 5 4 7z" fill="#fbbf24"/>
  </g>
  <rect x="40" y="104" width="60" height="6" rx="3" fill="#1e293b"/>
</svg>