קו רקיע

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

סצנת SVG מונפשת · נדל״ן · עיר · רקע · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="100%" role="img"
     aria-label="קו רקיע">
  <style>
    .sky-win { animation: sky-win 4s steps(1) infinite }
    .sky-w2 { animation-delay: 1s }
    .sky-w3 { animation-delay: 2s }
    .sky-w4 { animation-delay: 3s }
    @keyframes sky-win { 0%,45% { opacity: .85 } 50%,100% { opacity: .2 } }
  </style>
  <rect width="200" height="120" fill="#0f172a"/>
  <circle cx="164" cy="26" r="12" fill="#e2e8f0" opacity=".8"/>
  <g fill="#1e293b">
    <rect x="14" y="60" width="30" height="60"/>
    <rect x="50" y="40" width="26" height="80"/>
    <rect x="82" y="70" width="24" height="50"/>
    <rect x="112" y="30" width="30" height="90"/>
    <rect x="148" y="56" width="22" height="64"/>
    <rect x="176" y="76" width="20" height="44"/>
  </g>
  <g fill="#facc15">
    <rect class="sky-win" x="20" y="68" width="6" height="8"/>
    <rect class="sky-win sky-w2" x="32" y="82" width="6" height="8"/>
    <rect class="sky-win sky-w3" x="56" y="50" width="6" height="8"/>
    <rect class="sky-win sky-w4" x="66" y="66" width="6" height="8"/>
    <rect class="sky-win sky-w2" x="88" y="80" width="6" height="8"/>
    <rect class="sky-win sky-w3" x="118" y="42" width="6" height="8"/>
    <rect class="sky-win" x="130" y="60" width="6" height="8"/>
    <rect class="sky-win sky-w4" x="154" y="70" width="6" height="8"/>
    <rect class="sky-win sky-w2" x="180" y="88" width="6" height="8"/>
  </g>
  <rect y="116" width="200" height="4" fill="#020617"/>
</svg>