<svg viewBox="55 0 126.05 230" width="120px" xmlns="http://www.w3.org/2000/svg">
<g class="transport">
<g>
<title>Флаг</title>
<rect x="84.462" y="100.46" width="12.908" height="2.806" ry="2" />
<path d="m76.324 31.147 14.03-4.4897-0.2806 9.5405z" fill="#f00" />
<path d="m90.354 26.657-1e-6 74.22" fill="none" stroke="#000" stroke-width="2" />
<rect x="84.462" y="103.26" width="12.767" height="7.436" fill="#f00" />
</g>
<g>
<title>Башня</title>
<path d="m76.184 123.61 4.3494-12.627 17.889-0.0702-0.10523 12.978z" stroke="#000" stroke-width=".26458px" />
</g>
<g>
<title>Кузов</title>
<path d="m76.184 123.61c-15.261 0.71818-15.449 6.9895-16.977 12.767l124.59-0.56121c4.4876-2.153-11.702-8.1838-12.347-8.4181-33.08-5.9003-63.539-2.6271-95.265-3.7882z" fill="#d9d8d8" />
<rect x="60.33" y="135.81" width="123.47" height="33.672" ry="4" fill="#f55" />
<path d="m182.53 135.81-116.99 0.55033-4.0892 0.0192" fill="none" stroke="#000" stroke-linecap="round" stroke-width="4.9656" />
</g>
<g>
<title>Рама</title>
<path d="m180.03 172.54-1.8559-2.4972h-111.71l-2.1706 2.3229-0.11623 7.2713 18.954 17.192 79.158-1.4591 17.868-15.547z" fill="#222" />
</g>
<g>
<title>Калёса</title>
<circle cx="81.272" cy="197.01" r="15" stroke="#777" stroke-width="3" stroke-dasharray="3 3" />
<circle cx="122.55" cy="196.49" r="15" stroke="#777" stroke-width="3" stroke-dasharray="3 3" />
<circle cx="164.88" cy="196.49" r="15" stroke="#777" stroke-width="3" stroke-dasharray="3 3" />
</g>
</g>
</svg>
circle {
transform-box: fill-box;
transform-origin: center;
animation: wheel 4s linear infinite;
}
.transport {
animation: tick 1s linear infinite alternate;
}
@keyframes wheel {
100% {
transform: rotate(-360deg);
}
}
@keyframes tick {
0% {
transform: translateY(3px);
}
100% {
transform: translateY(0px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.