רכבת נוסעת

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

סצנת SVG מונפשת · תחבורה · נסיעה · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 110" width="100%" role="img"
     aria-label="רכבת נוסעת">
  <style>
    .tr { animation: tr-go 5s linear infinite }
    .tr-w { animation: tr-spin .55s linear infinite }
    .tr-smoke { animation: tr-up 1.6s ease-out infinite }
    .tr-smoke:nth-of-type(2) { animation-delay: .5s }
    .tr-smoke:nth-of-type(3) { animation-delay: 1s }
    @keyframes tr-go { from { transform: translateX(-130px) } to { transform: translateX(250px) } }
    @keyframes tr-spin { to { transform: rotate(360deg) } }
    @keyframes tr-up { from { transform: translate(0,0) scale(.5); opacity: .8 } to { transform: translate(-24px,-30px) scale(1.6); opacity: 0 } }
  </style>
  <rect width="240" height="110" fill="#0f172a"/>
  <rect y="86" width="240" height="4" fill="#475569"/>
  <rect x="3" y="90" width="8" height="4" fill="#334155"/>
  <rect x="18" y="90" width="8" height="4" fill="#334155"/>
  <rect x="33" y="90" width="8" height="4" fill="#334155"/>
  <rect x="48" y="90" width="8" height="4" fill="#334155"/>
  <rect x="63" y="90" width="8" height="4" fill="#334155"/>
  <rect x="78" y="90" width="8" height="4" fill="#334155"/>
  <rect x="93" y="90" width="8" height="4" fill="#334155"/>
  <rect x="108" y="90" width="8" height="4" fill="#334155"/>
  <rect x="123" y="90" width="8" height="4" fill="#334155"/>
  <rect x="138" y="90" width="8" height="4" fill="#334155"/>
  <rect x="153" y="90" width="8" height="4" fill="#334155"/>
  <rect x="168" y="90" width="8" height="4" fill="#334155"/>
  <rect x="183" y="90" width="8" height="4" fill="#334155"/>
  <rect x="198" y="90" width="8" height="4" fill="#334155"/>
  <rect x="213" y="90" width="8" height="4" fill="#334155"/>
  <rect x="228" y="90" width="8" height="4" fill="#334155"/>
  <g class="tr">
    <g fill="#cbd5e1" opacity=".7">
      <circle class="tr-smoke" cx="96" cy="34" r="6"/>
      <circle class="tr-smoke" cx="96" cy="34" r="6"/>
      <circle class="tr-smoke" cx="96" cy="34" r="6"/>
    </g>
    <rect x="10" y="52" width="52" height="30" rx="3" fill="#4338ca"/>
    <rect x="18" y="58" width="16" height="12" rx="2" fill="#bfdbfe"/>
    <rect x="40" y="58" width="16" height="12" rx="2" fill="#bfdbfe"/>
    <path d="M66 40h34v42H66z" fill="#dc2626"/>
    <rect x="72" y="48" width="18" height="14" rx="2" fill="#fecaca"/>
    <rect x="90" y="26" width="12" height="16" rx="2" fill="#991b1b"/>
    <g class="tr-w" style="transform-origin:24px 84px"><circle cx="24" cy="84" r="7" fill="#0f172a" stroke="#94a3b8" stroke-width="2.4"/><path d="M24 78v12" stroke="#475569" stroke-width="2"/></g>
    <g class="tr-w" style="transform-origin:50px 84px"><circle cx="50" cy="84" r="7" fill="#0f172a" stroke="#94a3b8" stroke-width="2.4"/><path d="M50 78v12" stroke="#475569" stroke-width="2"/></g>
    <g class="tr-w" style="transform-origin:78px 84px"><circle cx="78" cy="84" r="8" fill="#0f172a" stroke="#94a3b8" stroke-width="2.4"/><path d="M78 77v14" stroke="#475569" stroke-width="2"/></g>
  </g>
</svg>