לחיים

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120" width="100%" role="img"
     aria-label="לחיים">
  <style>
    .ch-l { animation: ch-l 2.4s ease-in-out infinite; transform-origin: 40px 100px }
    .ch-r { animation: ch-r 2.4s ease-in-out infinite; transform-origin: 120px 100px }
    .ch-b { animation: ch-b 2.4s ease-out infinite }
    @keyframes ch-l { 0%,60%,100% { transform: rotate(-8deg) } 30% { transform: rotate(6deg) } }
    @keyframes ch-r { 0%,60%,100% { transform: rotate(8deg) } 30% { transform: rotate(-6deg) } }
    @keyframes ch-b { 0%,25% { opacity: 0; transform: scale(.4) } 35% { opacity: 1; transform: scale(1) } 70%,100% { opacity: 0; transform: scale(1.5) } }
  </style>
  <rect width="160" height="120" fill="#1e1b4b"/>
  <g class="ch-b" fill="#fcd34d">
    <circle cx="80" cy="30" r="3.5"/><circle cx="62" cy="22" r="2.4"/>
    <circle cx="98" cy="24" r="2.8"/><circle cx="80" cy="12" r="2"/>
  </g>
  <g class="ch-l" fill="none" stroke="#e2e8f0" stroke-width="3.5" stroke-linecap="round">
    <path d="M24 38h32l-6 26a10 10 0 0 1-20 0z"/>
    <path d="M40 64v30M28 96h24"/>
  </g>
  <g class="ch-r" fill="none" stroke="#e2e8f0" stroke-width="3.5" stroke-linecap="round">
    <path d="M104 38h32l-6 26a10 10 0 0 1-20 0z"/>
    <path d="M120 64v30M108 96h24"/>
  </g>
</svg>