גלי ים

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

סצנת SVG מונפשת · ים · קיץ · רקע · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 110" width="100%" role="img"
     aria-label="גלי ים">
  <style>
    .sw1 { animation: sw-a 5s ease-in-out infinite }
    .sw2 { animation: sw-a 7s ease-in-out infinite reverse }
    .sw3 { animation: sw-a 9s ease-in-out infinite }
    .sw-sun { animation: sw-sun 6s ease-in-out infinite; transform-origin: 170px 32px }
    @keyframes sw-a { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-24px) } }
    @keyframes sw-sun { 50% { transform: scale(1.08) } }
  </style>
  <rect width="220" height="110" fill="#0c4a6e"/>
  <circle class="sw-sun" cx="170" cy="32" r="16" fill="#fbbf24" opacity=".9"/>
  <path class="sw3" d="M-30 66q28-10 56 0t56 0 56 0 56 0v50H-30z" fill="#0369a1"/>
  <path class="sw2" d="M-30 78q28-10 56 0t56 0 56 0 56 0v40H-30z" fill="#0284c7"/>
  <path class="sw1" d="M-30 90q28-10 56 0t56 0 56 0 56 0v30H-30z" fill="#38bdf8"/>
</svg>