אופניים

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 110" width="100%" role="img"
     aria-label="אופניים">
  <style>
    .bk-w { animation: bk-spin .8s linear infinite }
    .bk-body { animation: bk-bob 1.6s ease-in-out infinite }
    .bk-road { animation: bk-move .8s linear infinite }
    @keyframes bk-spin { to { transform: rotate(360deg) } }
    @keyframes bk-bob { 50% { transform: translateY(-2px) } }
    @keyframes bk-move { to { transform: translateX(-30px) } }
  </style>
  <rect width="200" height="110" fill="#f8fafc"/>
  <rect y="88" width="200" height="3" fill="#cbd5e1"/>
  <g class="bk-road">
    <rect x="0" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="30" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="60" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="90" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="120" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="150" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="180" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="210" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
    <rect x="240" y="96" width="16" height="2.5" rx="1.2" fill="#e2e8f0"/>
  </g>
  <g class="bk-body" stroke="#1e293b" stroke-width="3.5" fill="none" stroke-linecap="round">
    <g class="bk-w" style="transform-origin:52px 66px">
      <circle cx="52" cy="66" r="20"/><path d="M52 46v40M32 66h40M38 52l28 28M66 52 38 80"/>
    </g>
    <g class="bk-w" style="transform-origin:148px 66px">
      <circle cx="148" cy="66" r="20"/><path d="M148 46v40M128 66h40M134 52l28 28M162 52l-28 28"/>
    </g>
    <path d="M52 66l24-24h28l20 24M76 42l16 24h56M100 66l-8-24"/>
    <path d="M104 42h14M74 40h12"/>
    <circle cx="100" cy="66" r="6" stroke-width="3"/>
  </g>
</svg>