עוגת יום הולדת

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

סצנת SVG מונפשת · יום הולדת · חגיגה · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 130" width="100%" role="img"
     aria-label="עוגת יום הולדת">
  <style>
    .bc-f { transform-origin: center bottom; animation: bc-flick .9s ease-in-out infinite }
    .bc-f:nth-of-type(2) { animation-delay: .2s } .bc-f:nth-of-type(3) { animation-delay: .4s }
    .bc-cake { animation: bc-bob 3s ease-in-out infinite }
    @keyframes bc-flick { 50% { transform: scaleY(1.25) scaleX(.88) } }
    @keyframes bc-bob { 50% { transform: translateY(-3px) } }
  </style>
  <rect width="140" height="130" fill="#fdf2f8"/>
  <g class="bc-cake">
    <ellipse class="bc-f" cx="45" cy="34" rx="4" ry="7" fill="#fbbf24"/>
    <ellipse class="bc-f" cx="70" cy="30" rx="4" ry="7" fill="#fbbf24"/>
    <ellipse class="bc-f" cx="95" cy="34" rx="4" ry="7" fill="#fbbf24"/>
    <rect x="43" y="42" width="4" height="16" fill="#f472b6"/>
    <rect x="68" y="38" width="4" height="20" fill="#60a5fa"/>
    <rect x="93" y="42" width="4" height="16" fill="#a3e635"/>
    <path d="M26 58h88a6 6 0 0 1 6 6v12H20V64a6 6 0 0 1 6-6z" fill="#fbcfe8"/>
    <path d="M20 76h100v14H20z" fill="#f9a8d4"/>
    <path d="M14 90h112a6 6 0 0 1 6 6v14H8V96a6 6 0 0 1 6-6z" fill="#f472b6"/>
    <path d="M20 76c6 0 6 6 12 6s6-6 12-6 6 6 12 6 6-6 12-6 6 6 12 6 6-6 12-6 6 6 12 6" fill="none" stroke="#fff" stroke-width="3"/>
  </g>
</svg>