מכונית נוסעת

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 110" width="100%" role="img"
     aria-label="מכונית נוסעת">
  <style>
    .cd-road { animation: cd-move 1s linear infinite }
    .cd-wheel { animation: cd-spin 1s linear infinite; transform-origin: center }
    .cd-body { animation: cd-bob 1.1s ease-in-out infinite }
    .cd-hill { animation: cd-far 6s linear infinite }
    @keyframes cd-move { to { transform: translateX(-40px) } }
    @keyframes cd-spin { to { transform: rotate(360deg) } }
    @keyframes cd-bob { 50% { transform: translateY(-2px) } }
    @keyframes cd-far { to { transform: translateX(-120px) } }
  </style>
  <rect width="220" height="110" fill="#0f172a"/>
  <g class="cd-hill">
    <circle cx="40" cy="88" r="34" fill="#1e293b"/><circle cx="110" cy="92" r="30" fill="#1e293b"/>
    <circle cx="180" cy="88" r="34" fill="#1e293b"/><circle cx="250" cy="92" r="30" fill="#1e293b"/>
  </g>
  <rect y="84" width="220" height="26" fill="#1e1b4b"/>
  <g class="cd-road">
    <rect x="0" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
    <rect x="40" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
    <rect x="80" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
    <rect x="120" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
    <rect x="160" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
    <rect x="200" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
    <rect x="240" y="95" width="22" height="3" rx="1.5" fill="#64748b"/>
  </g>
  <g class="cd-body">
    <path d="M62 78V66c0-4 3-7 7-7h10l9-11h26l6 11h18c5 0 9 4 9 9v10z" fill="#6366f1"/>
    <path d="M88 48h22l5 11H82z" fill="#a5b4fc" opacity=".6"/>
    <circle cx="140" cy="66" r="4" fill="#fde68a"/>
    <g class="cd-wheel" style="transform-origin:80px 78px">
      <circle cx="80" cy="78" r="9" fill="#0f172a" stroke="#94a3b8" stroke-width="2.5"/>
      <path d="M80 71v14M73 78h14" stroke="#475569" stroke-width="2"/>
    </g>
    <g class="cd-wheel" style="transform-origin:130px 78px">
      <circle cx="130" cy="78" r="9" fill="#0f172a" stroke="#94a3b8" stroke-width="2.5"/>
      <path d="M130 71v14M123 78h14" stroke="#475569" stroke-width="2"/>
    </g>
  </g>
</svg>