Back
Tutorial on how to create a rotating mill animation - CSS only.
<div class="container">
<svg
width="150"
height="100"
viewBox="0 0 11.920966 12.515194"
version="1.1"
id="svg4730"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4727">
<linearGradient
id="primaryColor"
gradientTransform="matrix(11.682884,-83.646941,9.6091067,71.790175,414967.27,730829.26)">
<stop
style="stop-color:#1565c0;stop-opacity:1;"
offset="0"
id="stop5770" />
</linearGradient>
<filter
style="color-interpolation-filters:sRGB"
id="filter13414-3-2-4-4"
x="-0.056383205"
width="1.1127664"
y="-0.01524447"
height="1.0304889">
<feGaussianBlur
stdDeviation="0.1534375"
id="feGaussianBlur13416-6-5-9-8" />
</filter>
</defs>
<g
id="layer1"
transform="translate(-81.52047,-151.52258)">
<path
id="path13408-3-6-7-3"
d="m 4182.1631,3528.6688 3.125,-0.063 1.75,24.1563 h -6.5312 z"
style="opacity:0.442;fill:#222b36;fill-opacity:1;stroke:none;stroke-width:1.23916;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter13414-3-2-4-4)"
transform="matrix(0.2292348,0,0,0.4952211,-871.5853,-1595.7351)" />
<path
style="fill:#ced6e0;fill-opacity:1;stroke:none;stroke-width:0.41751;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 87.112029,151.73601 0.716332,-0.0312 0.401215,11.96272 h -1.497251 z"
id="rect13264-7-5-0-3-2-90" />
<rect
style="fill:#4b96eb;fill-opacity:1;stroke:none;stroke-width:0.147372;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect13657-8-4-2"
width="11.920966"
height="0.5284512"
x="81.52047"
y="163.50932"
ry="0.14946856" />
</g>
</svg>
<svg
class="foreground"
width="150"
height="100"
viewBox="0 0 12.581109 12.581109"
version="1.1"
id="svg4730"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4727">
<linearGradient
id="primaryColor"
gradientTransform="matrix(11.682884,-83.646941,9.6091067,71.790175,414967.27,730829.26)">
<stop
style="stop-color:#1565c0;stop-opacity:1;"
offset="0"
id="stop5770" />
</linearGradient>
<filter
style="color-interpolation-filters:sRGB"
id="filter13396-5-7-9-0"
x="-0.04108855"
width="1.0821771"
y="-0.066687385"
height="1.1333748">
<feGaussianBlur
stdDeviation="0.2952988"
id="feGaussianBlur13398-6-3-9-2" />
</filter>
<filter
style="color-interpolation-filters:sRGB"
id="filter13400-9-3-75-3"
x="-0.041302234"
width="1.0826045"
y="-0.065796888"
height="1.1315938">
<feGaussianBlur
stdDeviation="0.2952988"
id="feGaussianBlur13402-0-7-3-8" />
</filter>
<filter
style="color-interpolation-filters:sRGB"
id="filter13404-4-9-7-7"
x="-0.14547095"
width="1.2909419"
y="-0.03603903"
height="1.0720781">
<feGaussianBlur
stdDeviation="0.2952988"
d="feGaussianBlur13406-3-3-9-9" />
</filter>
</defs>
<g
id="layer1"
transform="translate(-62.013965,-145.38481)">
<circle
style="fill:#ffffff;fill-opacity:0.00492614;stroke:none;stroke-width:0.172767;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:0.345533, 0.345533;stroke-dashoffset:0;stroke-opacity:1"
id="circle9226-1-1-3"
cx="68.30452"
cy="151.67537"
r="6.2905545" />
<path
id="path13330-8-4-4-5"
d="m 3818.0558,3694.3511 a 2.4354968,9.8327603 60.280361 0 1 -7.3876,7.0054 2.4354968,9.8327603 60.280361 0 1 -9.7046,2.7195 2.4354968,9.8327603 60.280361 0 1 7.3876,-7.0055 2.4354968,9.8327603 60.280361 0 1 9.7046,-2.7194 z"
style="opacity:0.252;fill:#434343;fill-opacity:1;stroke:none;stroke-width:1.23846;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter13396-5-7-9-0)"
transform="matrix(0.33149614,0,0,0.33149614,-1196.8992,-1073.2337)" />
<path
style="opacity:0.252;fill:#434343;fill-opacity:1;stroke:none;stroke-width:1.23846;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter13400-9-3-75-3)"
d="m 3815.3007,3694.2436 a 9.8327603,2.4354968 30.280361 0 1 9.7607,2.8952 9.8327603,2.4354968 30.280361 0 1 7.2076,7.0448 9.8327603,2.4354968 30.280361 0 1 -9.7607,-2.8952 9.8327603,2.4354968 30.280361 0 1 -7.2076,-7.0448 z"
id="path13332-4-0-1-2"
transform="matrix(0.33149614,0,0,0.33149614,-1196.8992,-1073.2337)" />
<path
style="fill:#ececec;fill-opacity:1;stroke:none;stroke-width:0.410543;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 68.771415,151.42934 a 0.8073577,3.2595216 60.280361 0 1 -2.448957,2.32225 0.8073577,3.2595216 60.280361 0 1 -3.217043,0.90151 0.8073577,3.2595216 60.280361 0 1 2.448957,-2.3223 0.8073577,3.2595216 60.280361 0 1 3.217043,-0.90146 z"
id="path9435-8-2-8-7-9-0-6-8-2" />
<path
id="path13334-4-0-2-7"
d="m 3816.5854,3696.6836 a 2.4354968,9.8327603 0.280361 0 1 -2.3732,-9.9006 2.4354968,9.8327603 0.280361 0 1 2.4971,-9.7642 2.4354968,9.8327603 0.280361 0 1 2.3732,9.9006 2.4354968,9.8327603 0.280361 0 1 -2.4971,9.7642 z"
style="opacity:0.252;fill:#434343;fill-opacity:1;stroke:none;stroke-width:1.23846;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter13404-4-9-7-7)"
transform="matrix(0.33149614,0,0,0.33149614,-1196.8992,-1073.2337)" />
<path
id="path9530-1-8-1-6-4-6-3"
d="m 67.858126,151.3937 a 3.2595216,0.8073577 30.280361 0 1 3.235642,0.95975 3.2595216,0.8073577 30.280361 0 1 2.389267,2.33534 3.2595216,0.8073577 30.280361 0 1 -3.235616,-0.95977 3.2595216,0.8073577 30.280361 0 1 -2.389293,-2.33532 z"
style="fill:#ececec;fill-opacity:1;stroke:none;stroke-width:0.410543;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
style="fill:#ececec;fill-opacity:1;stroke:none;stroke-width:0.410543;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 68.283999,152.20253 a 0.8073577,3.2595216 0.280361 0 1 -0.786712,-3.282 0.8073577,3.2595216 0.280361 0 1 0.827775,-3.2368 0.8073577,3.2595216 0.280361 0 1 0.786686,3.28202 0.8073577,3.2595216 0.280361 0 1 -0.827749,3.23678 z"
id="path13221-7-7-5-4-0-0-7" />
<circle
style="fill:#adb3ba;fill-opacity:1;stroke:none;stroke-width:0.486193;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path9466-5-6-4-1-4-5-6-5-3-9"
cx="-16.684254"
cy="165.50694"
r="0.96691293"
transform="rotate(-29.999999)" />
<circle
style="fill:#e8eae9;fill-opacity:1;stroke:none;stroke-width:0.265197;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path9466-5-6-4-4-8-4-6-9-0"
cx="-16.684221"
cy="165.50694"
r="0.52740705"
transform="rotate(-29.999999)" />
</g>
</svg>
</div>
<style>
.container {
position: relative;
transform: translateY(20%);
display: flex;
justify-content: center;
}
.foreground {
position: absolute;
transform: translateY(-50%);
animation: spin 2s infinite linear;
}
@keyframes spin {
100% {
transform: translateY(-50%) rotate(360deg);
}
}
</style>
Thank you for reading this article.