זריחה מעל הים

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="100%" role="img"
     aria-label="זריחה מעל הים">
  <style>
    .sr-sun { animation: sr-rise 8s ease-in-out infinite }
    .sr-w { animation: sr-w 4s ease-in-out infinite }
    .sr-w2 { animation-delay: 1.3s }
    .sr-w3 { animation-delay: 2.6s }
    @keyframes sr-rise { 0%,100% { transform: translateY(20px) } 50% { transform: translateY(-10px) } }
    @keyframes sr-w { 0%,100% { transform: translateX(-6px) } 50% { transform: translateX(6px) } }
  </style>
  <defs>
    <linearGradient id="sr-sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1e1b4b"/>
      <stop offset="1" stop-color="#f97316"/>
    </linearGradient>
  </defs>
  <rect width="200" height="76" fill="url(#sr-sky)"/>
  <circle class="sr-sun" cx="100" cy="66" r="20" fill="#fde047"/>
  <rect y="72" width="200" height="48" fill="#0c4a6e"/>
  <g stroke="#7dd3fc" stroke-width="3" stroke-linecap="round" opacity=".7">
    <path class="sr-w" d="M40 84h34"/>
    <path class="sr-w sr-w2" d="M110 92h40"/>
    <path class="sr-w sr-w3" d="M60 102h44"/>
    <path class="sr-w sr-w2" d="M138 110h38"/>
  </g>
</svg>