כדור פורח

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 160" width="100%" role="img"
     aria-label="כדור פורח">
  <style>
    .hb { animation: hb-float 5s ease-in-out infinite }
    .hb-c { animation: hb-cloud 9s linear infinite }
    @keyframes hb-float { 0%,100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-12px) rotate(1.5deg) } }
    @keyframes hb-cloud { to { transform: translateX(-140px) } }
  </style>
  <rect width="120" height="160" fill="#bae6fd"/>
  <g class="hb-c" opacity=".85">
    <ellipse cx="140" cy="34" rx="18" ry="9" fill="#fff"/>
    <ellipse cx="200" cy="96" rx="22" ry="10" fill="#fff"/>
  </g>
  <g class="hb">
    <path d="M60 20c19 0 32 15 32 33 0 16-13 28-22 38H50c-9-10-22-22-22-38 0-18 13-33 32-33z" fill="#f472b6"/>
    <path d="M60 20c7 0 12 33 12 53 0 8-2 14-4 18H52c-2-4-4-10-4-18 0-20 5-53 12-53z" fill="#fbbf24"/>
    <path d="M50 91h20v5H50z" fill="#b45309"/>
    <path d="M52 96l-3 14M68 96l3 14" stroke="#78350f" stroke-width="2"/>
    <rect x="47" y="110" width="26" height="18" rx="3" fill="#a16207"/>
  </g>
</svg>