מתנה קופצת

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="100%" role="img"
     aria-label="מתנה קופצת">
  <style>
    .gf-lid { animation: gf-pop 2.2s ease-in-out infinite; transform-origin: 60px 52px }
    .gf-box { animation: gf-squash 2.2s ease-in-out infinite; transform-origin: 60px 104px }
    .gf-s { animation: gf-spark 2.2s ease-out infinite }
    @keyframes gf-pop { 0%,55%,100% { transform: translateY(0) rotate(0) } 25% { transform: translateY(-22px) rotate(-9deg) } }
    @keyframes gf-squash { 0%,55%,100% { transform: scaleY(1) } 22% { transform: scaleY(.92) } }
    @keyframes gf-spark { 0%,15% { opacity: 0; transform: scale(.4) } 30% { opacity: 1; transform: scale(1) } 60%,100% { opacity: 0; transform: scale(1.3) } }
  </style>
  <rect width="120" height="120" fill="#1e1b4b"/>
  <g class="gf-s" fill="#fcd34d">
    <circle cx="30" cy="40" r="3"/><circle cx="92" cy="34" r="2.4"/>
    <circle cx="20" cy="66" r="2.2"/><circle cx="100" cy="62" r="3"/>
  </g>
  <g class="gf-box">
    <rect x="26" y="58" width="68" height="46" rx="4" fill="#e11d48"/>
    <rect x="53" y="58" width="14" height="46" fill="#fbbf24"/>
  </g>
  <g class="gf-lid">
    <rect x="20" y="42" width="80" height="16" rx="4" fill="#f43f5e"/>
    <rect x="53" y="42" width="14" height="16" fill="#fbbf24"/>
    <path d="M60 42c-8 0-12-4-12-8s8-6 12 2c4-8 12-6 12-2s-4 8-12 8z" fill="#fbbf24"/>
  </g>
</svg>