console
<div id="tractor" class="tractor">
<svg viewBox="0 0 200 200">
<g class="pipe" fill="#5B3514">
<path d="M123.15 37.252l-15.793-11.693v7.195l9.333 7.584 6.46-3.086zM149.253 110.032V74.666c0-.328.267-.596.596-.596h2.521c.329 0 .597.267.597.596v35.366a.597.597 0 0 1-.597.596h-2.521a.596.596 0 0 1-.596-.596zM129.548 110.032V74.666c0-.328.268-.596.596-.596h2.522c.328 0 .596.267.596.596v35.366a.597.597 0 0 1-.596.596h-2.522a.596.596 0 0 1-.596-.596zM135.123 110.162V70.518c0-.33.267-.597.596-.597h2.521c.329 0 .597.267.597.597v39.644a.597.597 0 0 1-.597.596h-2.521a.596.596 0 0 1-.596-.596z"/>
<path d="M151.81 81.371h-15.012a.596.596 0 0 1-.596-.596v-2.521c0-.329.267-.597.596-.597h15.012c.33 0 .597.268.597.597v2.521a.596.596 0 0 1-.597.596zM116.325 37.252h6.825v51.856h-6.825z"/>
</g>
<g class="body">
<path d="M174.814 138.332v-51.13c0-8.037-55.66-6.329-55.66-6.329V43.125c0-9.852-64.203-9.334-64.203-3.112v98.318h119.863v.001z" fill="#FEBD33"/>
<path d="M88.504 138.332h72.891c.538-13.022-.303-48.51-.303-50.61 0-3.89-42.133-4.149-42.133.259v29.817h-12.316l-18.139 20.534z" fill="#FAA334"/>
<path d="M156.866 92.392H121.5a.598.598 0 0 1-.597-.598v-2.52c0-.33.267-.596.597-.596h35.366c.328 0 .596.266.596.596v2.52c0 .33-.268.598-.596.598zM156.866 98.757H121.5a.597.597 0 0 1-.597-.597v-2.52c0-.33.267-.596.597-.596h35.366c.328 0 .596.266.596.596v2.52c0 .33-.268.597-.596.597zM156.866 105.077H121.5a.598.598 0 0 1-.597-.596v-2.522c0-.328.267-.596.597-.596h35.366c.328 0 .596.268.596.596v2.522a.597.597 0 0 1-.596.596z" fill="#5B3514"/>
<path d="M104.958 86.813a4.02 4.02 0 0 1 8.038 0 4.021 4.021 0 0 1-4.019 4.019 4.021 4.021 0 0 1-4.019-4.019z" fill="#FAA334"/>
<path d="M106.513 86.813a2.465 2.465 0 1 1 2.464 2.464 2.465 2.465 0 0 1-2.464-2.464z" fill="#5B3514"/>
</g>
<g class="back-wheel">
<path d="M21.334 124.02c0-23.814 19.334-43.147 43.147-43.147 23.814 0 43.147 19.333 43.147 43.147 0 23.813-19.333 43.147-43.147 43.147-23.813 0-43.147-19.334-43.147-43.147z" fill="#6E4320"/>
<path d="M75.856 172.44H53.107a2.922 2.922 0 0 1-2.913-2.914V78.513a2.922 2.922 0 0 1 2.913-2.913h22.749a2.922 2.922 0 0 1 2.913 2.913v91.013a2.92 2.92 0 0 1-2.913 2.914z" fill="#6E4320"/>
<path d="M38.286 166.302L22.2 150.215a2.925 2.925 0 0 1 0-4.121l64.357-64.356a2.92 2.92 0 0 1 4.119 0l16.087 16.087a2.922 2.922 0 0 1 0 4.12l-64.356 64.357a2.923 2.923 0 0 1-4.121 0z" fill="#6E4320"/>
<path d="M16.062 135.395v-22.749a2.923 2.923 0 0 1 2.914-2.914h91.013a2.923 2.923 0 0 1 2.914 2.914v22.749a2.923 2.923 0 0 1-2.914 2.914H18.976a2.922 2.922 0 0 1-2.914-2.914z" fill="#6E4320"/>
<path d="M22.2 97.825l16.086-16.087a2.922 2.922 0 0 1 4.12 0l64.356 64.356a2.923 2.923 0 0 1 0 4.121l-16.087 16.087a2.92 2.92 0 0 1-4.119 0l-64.357-64.357a2.925 2.925 0 0 1 .001-4.12z" fill="#6E4320"/>
<path d="M24.731 124.02c0-21.939 17.811-39.751 39.75-39.751s39.751 17.812 39.751 39.751c0 21.939-17.812 39.75-39.751 39.75-21.939 0-39.75-17.811-39.75-39.75z" fill="#5B3514"/>
<path d="M44.466 124.02c0-11.048 8.969-20.017 20.016-20.017 11.048 0 20.017 8.969 20.017 20.017 0 11.047-8.969 20.017-20.017 20.017-11.047 0-20.016-8.97-20.016-20.017z" fill="#FEBD33"/>
<path d="M48.976 124.02c0-8.558 6.948-15.506 15.505-15.506 8.558 0 15.506 6.948 15.506 15.506s-6.948 15.505-15.506 15.505c-8.557 0-15.505-6.947-15.505-15.505z" fill="#6E4320"/>
<path d="M54.952 124.02c0-5.26 4.271-9.53 9.53-9.53 5.26 0 9.53 4.27 9.53 9.53s-4.27 9.53-9.53 9.53c-5.259 0-9.53-4.27-9.53-9.53z" fill="#5B3514"/>
<path d="M58.701 124.02c0-3.19 2.59-5.78 5.78-5.78 3.19 0 5.78 2.59 5.78 5.78 0 3.19-2.59 5.78-5.78 5.78-3.19 0-5.78-2.59-5.78-5.78z" fill="#FEBD33"/>
</g>
<g class="front-wheel">
<path d="M133.496 138.332c0-16.776 13.619-30.395 30.394-30.395 16.776 0 30.395 13.619 30.395 30.395 0 16.775-13.619 30.394-30.395 30.394-16.775 0-30.394-13.619-30.394-30.394z" fill="#6E4320"/>
<path d="M171.043 172.44H156.74a2.922 2.922 0 0 1-2.913-2.914v-62.391a2.922 2.922 0 0 1 2.913-2.913h14.303a2.923 2.923 0 0 1 2.914 2.913v62.391a2.922 2.922 0 0 1-2.914 2.914z" fill="#6E4320"/>
<path d="M144.829 167.506l-10.115-10.113a2.924 2.924 0 0 1 0-4.12l44.118-44.117a2.922 2.922 0 0 1 4.12 0l10.114 10.113a2.923 2.923 0 0 1 0 4.121l-44.117 44.116a2.92 2.92 0 0 1-4.12 0z" fill="#6E4320"/>
<path d="M129.782 145.483V131.18a2.922 2.922 0 0 1 2.914-2.914h62.39A2.923 2.923 0 0 1 198 131.18v14.303a2.923 2.923 0 0 1-2.914 2.913h-62.39a2.921 2.921 0 0 1-2.914-2.913z" fill="#6E4320"/>
<path d="M134.714 119.269l10.115-10.113a2.922 2.922 0 0 1 4.12 0l44.117 44.117a2.922 2.922 0 0 1 0 4.12l-10.114 10.113a2.92 2.92 0 0 1-4.12 0l-44.118-44.116a2.927 2.927 0 0 1 0-4.121z" fill="#6E4320"/>
<path d="M135.888 138.332c0-15.455 12.548-28.003 28.002-28.003 15.455 0 28.003 12.548 28.003 28.003 0 15.454-12.548 28.002-28.003 28.002-15.454 0-28.002-12.548-28.002-28.002z" fill="#5B3514"/>
<path d="M149.79 138.332c0-7.782 6.318-14.1 14.1-14.1s14.1 6.318 14.1 14.1-6.318 14.1-14.1 14.1-14.1-6.318-14.1-14.1z" fill="#FEBD33"/>
<path d="M152.967 138.332c0-6.029 4.895-10.924 10.923-10.924 6.029 0 10.924 4.895 10.924 10.924 0 6.028-4.895 10.923-10.924 10.923-6.028 0-10.923-4.895-10.923-10.923z" fill="#6E4320"/>
<path d="M157.179 138.332a6.715 6.715 0 0 1 6.712-6.713 6.716 6.716 0 0 1 6.713 6.713 6.715 6.715 0 0 1-6.713 6.712 6.714 6.714 0 0 1-6.712-6.712z" fill="#5B3514"/>
<path d="M159.82 138.332a4.073 4.073 0 0 1 4.071-4.072 4.073 4.073 0 0 1 4.072 4.072 4.073 4.073 0 0 1-8.143 0z" fill="#FEBD33"/>
</g>
<g class="window">
<path d="M115.175 72.619h-47.14a1.904 1.904 0 0 1-1.903-1.904V45.937c0-1.052.853-1.904 1.903-1.904h47.14c1.052 0 1.904.853 1.904 1.904v24.778a1.904 1.904 0 0 1-1.904 1.904z" fill="#FAA334"/>
<path d="M96.175 47.144H74.979a5.932 5.932 0 0 0-5.932 5.931v11.473a5.932 5.932 0 0 0 5.932 5.931h21.196a5.931 5.931 0 0 0 5.931-5.931V53.075a5.931 5.931 0 0 0-5.931-5.931zM111.426 47.144h-3.274a3.098 3.098 0 0 0-3.099 3.097v17.14a3.099 3.099 0 0 0 3.099 3.098h3.274a3.099 3.099 0 0 0 3.099-3.098v-17.14a3.1 3.1 0 0 0-3.099-3.097z" fill="#C1E8FB"/>
<path d="M76.167 47.144l-7.119 7.458v3.313l9.774-10.771h-2.655zM80.871 47.144L69.048 60.403v4.145c0 .121.029.233.036.352l15.808-17.756h-4.021zM108.705 47.144l-3.652 3.827v3.124l6.307-6.951h-2.655zM114.524 50.241c0-1.13-.637-2.077-1.542-2.618l-7.93 8.892v4.532l9.471-10.639v-.167h.001z" fill="#FFF"/>
</g>
</svg>
</div>
body, html {
height: 100%;
background: radial-gradient(ellipse at center, #499bea 0%,#207ce5 100%);
}
.tractor {
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tractor #shadow {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
transform: scaleY(0.3);
opacity: 0.5;
filter: blur(20px);
}
.tractor #shadow path {
fill: #000;
}
@keyframes body-kick {
0% { transform: translateY(0) rotate(0deg) }
5% { transform: translateY(0) rotate(0deg) }
10% { transform: translateY(5px) rotate(0.5deg) }
15% { transform: translateY(-2px) rotate(-0.5deg) }
20% { transform: translateY(0) rotate(0deg) }
30% { transform: translateY(0) rotate(0deg) }
35% { transform: translateY(6px) rotate(1deg) }
40% { transform: translateY(-2px) rotate(-0.5deg) }
45% { transform: translateY(0) rotate(0deg) }
50% { transform: translateY(4px) rotate(1deg) }
55% { transform: translateY(-1px) rotate(-0.5deg) }
60% { transform: translateY(0) rotate(0deg) }
100% { transform: translateY(0) rotate(0deg) }
}
@keyframes wheel {
0% { transform: translateY(0) rotate(0deg) }
5% { transform: translateY(0) rotate(18deg) }
10% { transform: translateY(5px) rotate(36deg) }
15% { transform: translateY(-3px) rotate(54deg) }
20% { transform: translateY(0) rotate(72deg) }
30% { transform: translateY(0) rotate(108deg) }
35% { transform: translateY(6px) rotate(126deg) }
40% { transform: translateY(-3px) rotate(144deg) }
45% { transform: translateY(0) rotate(162deg) }
50% { transform: translateY(4px) rotate(180deg) }
55% { transform: translateY(-2px) rotate(198deg) }
60% { transform: translateY(0) rotate(216deg) }
100% { transform: translateY(0) rotate(360deg) }
}
.back-wheel {
animation: wheel 2s linear infinite;
animation-delay: 100ms;
transform-origin: 64.48px 124px;
}
.front-wheel {
animation: wheel 2s linear infinite;
transform-origin: 164px 138px;
}
.pipe {
animation: body-kick 2s linear infinite;
animation-delay: 150ms;
}
.body {
animation: body-kick 2s linear infinite;
animation-delay: 100ms;
}
.window {
animation: body-kick 2s linear infinite;
animation-delay: 100ms;
}
.copy {
width: 100%;
font-size: 0.8rem;
position: absolute;
bottom: 10px;
text-align: center;
opacity: 0.5;
}