כוס קפה

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

סצנת SVG מונפשת · בית קפה · מסעדנות · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="100%" role="img"
     aria-label="כוס קפה">
  <style>
    .cf-s { animation: cf-rise 3s ease-in-out infinite; opacity: 0 }
    .cf-s2 { animation-delay: 1s }
    .cf-s3 { animation-delay: 2s }
    @keyframes cf-rise {
      0% { opacity: 0; transform: translateY(8px) }
      35% { opacity: .85 }
      100% { opacity: 0; transform: translateY(-20px) }
    }
  </style>
  <rect width="120" height="120" fill="#0f172a"/>
  <g stroke="#e2e8f0" stroke-width="4" stroke-linecap="round" fill="none">
    <path class="cf-s" d="M46 50v-13"/>
    <path class="cf-s cf-s2" d="M60 50v-13"/>
    <path class="cf-s cf-s3" d="M74 50v-13"/>
  </g>
  <path d="M86 64h8a11 11 0 0 1 0 22h-8" fill="none" stroke="#818cf8" stroke-width="6"/>
  <path d="M30 58h56v26a16 16 0 0 1-16 16H46a16 16 0 0 1-16-16z" fill="#6366f1"/>
  <path d="M30 58h56v8H30z" fill="#a5b4fc"/>
  <rect x="24" y="102" width="68" height="6" rx="3" fill="#1e293b"/>
</svg>