שמש מאחורי ענן

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

סצנת SVG מונפשת · מזג אוויר · עדין · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 110" width="100%" role="img"
     aria-label="שמש מאחורי ענן">
  <style>
    .wt-sun { animation: wt-spin 22s linear infinite; transform-origin: 52px 44px }
    .wt-cloud { animation: wt-drift 5s ease-in-out infinite }
    .wt-drop { animation: wt-rain 1.4s linear infinite }
    .wt-drop:nth-of-type(2) { animation-delay: .35s }
    .wt-drop:nth-of-type(3) { animation-delay: .7s }
    @keyframes wt-spin { to { transform: rotate(360deg) } }
    @keyframes wt-drift { 50% { transform: translateX(6px) } }
    @keyframes wt-rain { from { transform: translateY(0); opacity: 1 } to { transform: translateY(22px); opacity: 0 } }
  </style>
  <rect width="140" height="110" fill="#e0f2fe"/>
  <g class="wt-sun" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round">
    <circle cx="52" cy="44" r="15" fill="#fbbf24" stroke="none"/>
    <path d="M52 20v-7M52 75v-7M28 44h-7M83 44h-7M35 27l-5-5M74 66l5 5M69 27l5-5M35 61l-5 5"/>
  </g>
  <g class="wt-cloud">
    <ellipse cx="80" cy="58" rx="24" ry="17" fill="#fff"/>
    <ellipse cx="60" cy="64" rx="18" ry="13" fill="#fff"/>
    <ellipse cx="98" cy="65" rx="16" ry="12" fill="#fff"/>
    <rect x="58" y="62" width="52" height="14" rx="7" fill="#fff"/>
  </g>
  <g stroke="#38bdf8" stroke-width="3" stroke-linecap="round">
    <path class="wt-drop" d="M66 80v7"/>
    <path class="wt-drop" d="M84 80v7"/>
    <path class="wt-drop" d="M100 80v7"/>
  </g>
</svg>