רימון לראש השנה

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 140" width="100%" role="img"
     aria-label="רימון לראש השנה">
  <style>
    .pm { animation: pm-bob 3.4s ease-in-out infinite; transform-origin: 60px 40px }
    .pm-s { animation: pm-seed 2.4s ease-in-out infinite }
    .pm-s:nth-of-type(2n) { animation-delay: .4s }
    .pm-s:nth-of-type(3n) { animation-delay: .8s }
    @keyframes pm-bob { 0%,100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
    @keyframes pm-seed { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
  </style>
  <rect width="120" height="140" fill="#fff7ed"/>
  <g class="pm">
    <path d="M60 28c-4-8-2-16 4-20-2 8 2 14 8 16" fill="none" stroke="#65a30d" stroke-width="4" stroke-linecap="round"/>
    <path d="M60 30c-4-6-10-6-14-2 6 0 8 4 10 6" fill="#84cc16"/>
    <ellipse cx="60" cy="82" rx="36" ry="40" fill="#dc2626"/>
    <path d="M60 42c-10 0-14 6-14 6s6-4 14-4 14 4 14 4-4-6-14-6z" fill="#b91c1c"/>
    <g fill="#fecaca">
      <circle class="pm-s" cx="50" cy="74" r="4"/><circle class="pm-s" cx="62" cy="70" r="4"/>
      <circle class="pm-s" cx="72" cy="78" r="4"/><circle class="pm-s" cx="54" cy="88" r="4"/>
      <circle class="pm-s" cx="66" cy="92" r="4"/><circle class="pm-s" cx="44" cy="84" r="4"/>
    </g>
  </g>
</svg>