Train on track

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/motion-path/train-track.html
  Desc   : Toy train following its track, wheels spinning, car in tow
  ============================================================
-->
<div class="sg-train-track" style="--sg-color:#7F77DD; --sg-car:#EFBB33; --sg-size:260px;">
  <svg viewBox="0 0 200 130" aria-hidden="true" focusable="false">
    <path id="sg-train-track-rail" class="sg-train-track-sleepers"
      d="M 45 25 H 155 A 28 28 0 0 1 183 53 V 77 A 28 28 0 0 1 155 105 H 45 A 28 28 0 0 1 17 77 V 53 A 28 28 0 0 1 45 25 Z" />
    <use href="#sg-train-track-rail" class="sg-train-track-rails" />
    <g class="sg-train-track-car">
      <rect x="-8" y="-8" width="16" height="6.5" rx="1.5" />
      <g class="sg-train-track-wheel"><circle cx="-4" cy="0" r="2.4" /><path d="M-4 -2.4 V2.4 M-6.4 0 H-1.6" /></g>
      <g class="sg-train-track-wheel"><circle cx="4" cy="0" r="2.4" /><path d="M4 -2.4 V2.4 M1.6 0 H6.4" /></g>
      <animateMotion dur="10s" begin="-9.75s" repeatCount="indefinite" rotate="auto">
        <mpath href="#sg-train-track-rail" />
      </animateMotion>
    </g>
    <g class="sg-train-track-engine">
      <rect x="-9" y="-8" width="13" height="7" rx="1.5" />
      <rect x="3" y="-11" width="7" height="10" rx="1.5" />
      <rect x="-7" y="-11.5" width="3" height="4" rx="1" />
      <g class="sg-train-track-wheel"><circle cx="-5" cy="0" r="2.4" /><path d="M-5 -2.4 V2.4 M-7.4 0 H-2.6" /></g>
      <g class="sg-train-track-wheel"><circle cx="5" cy="0" r="2.4" /><path d="M5 -2.4 V2.4 M2.6 0 H7.4" /></g>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
        <mpath href="#sg-train-track-rail" />
      </animateMotion>
    </g>
  </svg>
</div>
<style>
  .sg-train-track {
    width: var(--sg-size);
  }
  .sg-train-track svg {
    display: block;
    width: 100%;
  }
  .sg-train-track-sleepers {
    fill: none;
    stroke: rgba(128, 128, 128, 0.35);
    stroke-width: 7;
    stroke-dasharray: 1.6 5;
  }
  .sg-train-track-rails {
    fill: none;
    stroke: rgba(128, 128, 128, 0.55);
    stroke-width: 1.6;
    stroke-dasharray: none;
  }
  .sg-train-track-engine rect {
    fill: var(--sg-color);
  }
  .sg-train-track-car rect {
    fill: var(--sg-car);
  }
  .sg-train-track-wheel circle {
    fill: rgba(60, 60, 60, 0.85);
  }
  .sg-train-track-wheel path {
    stroke: rgba(200, 200, 200, 0.9);
    stroke-width: 0.7;
  }
  .sg-train-track-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-train-track-spin 0.9s linear infinite;
  }
  @keyframes sg-train-track-spin {
    to { transform: rotate(360deg); }
  }
</style>