Wind Farm
Three hairline wind turbines on an isometric field turn their rotors in true dimetric projection, cabled to a small substation, with the nearest rotor picked out in the accent.
Also known as: wind turbine animation, isometric wind farm, renewable energy animation, hairline animation.
HTML
<div class="hln-wind-farm" role="img" aria-label="Three wind turbines turning on a field"><svg viewBox="-61 -32.91 150 81.82" aria-hidden="true"><g><polygon points="-44,22 30,59 30,57 -44,20"/><polygon points="74,37 30,59 30,57 74,35"/><polygon points="0,-2 74,35 30,57 -44,20"/></g><polyline points="-12,14 -28,22 20,46" fill="none" class="hln-wind-farm-l"/><polyline points="48,26 56,30 30,43" fill="none" class="hln-wind-farm-l"/><polygon points="46.6,26 47.3,-2 48.7,-2 49.4,26"/><g><polygon points="43.5,-1.25 48,1 48,-1.8 43.5,-4.05"/><polygon points="52.5,-1.25 48,1 48,-1.8 52.5,-4.05"/><polygon points="48,-6.3 52.5,-4.05 48,-1.8 43.5,-4.05"/></g><g transform="translate(48 -0.4) scale(1.414 1)"><g class="hln-wind-farm-rot" style="--delay: -2s"><g><polygon points="-1,-1.6 -0.35,-13 0.45,-12.2 1.2,-1.8"/><g transform="rotate(120)"><polygon points="-1,-1.6 -0.35,-13 0.45,-12.2 1.2,-1.8"/></g><g transform="rotate(240)"><polygon points="-1,-1.6 -0.35,-13 0.45,-12.2 1.2,-1.8"/></g></g><circle r="1.5"/></g></g><polygon points="-13.4,14 -12.7,-16 -11.3,-16 -10.6,14"/><g><polygon points="-16.5,-15.25 -12,-13 -12,-15.8 -16.5,-18.05"/><polygon points="-7.5,-15.25 -12,-13 -12,-15.8 -7.5,-18.05"/><polygon points="-12,-20.3 -7.5,-18.05 -12,-15.8 -16.5,-18.05"/></g><g transform="translate(-12 -14.4) scale(1.414 1)"><g class="hln-wind-farm-rot" style="--delay: -4.1s"><g><polygon points="-1,-1.6 -0.35,-13 0.45,-12.2 1.2,-1.8"/><g transform="rotate(120)"><polygon points="-1,-1.6 -0.35,-13 0.45,-12.2 1.2,-1.8"/></g><g transform="rotate(240)"><polygon points="-1,-1.6 -0.35,-13 0.45,-12.2 1.2,-1.8"/></g></g><circle r="1.5"/></g></g><g><polygon points="20,44 29,48.5 29,42.5 20,38"/><polygon points="37,44.5 29,48.5 29,42.5 37,38.5"/><polygon points="28,34 37,38.5 29,42.5 20,38"/></g><polygon points="22,43.5 25,45 25,42.5 22,41" class="hln-wind-farm-l"/><line x1="26" y1="47" x2="26" y2="41" class="hln-wind-farm-l"/><polygon points="0.6,29 1.3,-7 2.7,-7 3.4,29"/><g><polygon points="-2.5,-6.25 2,-4 2,-6.8 -2.5,-9.05"/><polygon points="6.5,-6.25 2,-4 2,-6.8 6.5,-9.05"/><polygon points="2,-11.3 6.5,-9.05 2,-6.8 -2.5,-9.05"/></g><g transform="translate(2 -5.4) scale(1.414 1)"><g class="hln-wind-farm-rot" style="--delay: 0s"><g class="hln-wind-farm-a"><polygon points="-1,-1.6 -0.35,-16 0.45,-15.2 1.2,-1.8"/><g transform="rotate(120)"><polygon points="-1,-1.6 -0.35,-16 0.45,-15.2 1.2,-1.8"/></g><g transform="rotate(240)"><polygon points="-1,-1.6 -0.35,-16 0.45,-15.2 1.2,-1.8"/></g></g><circle r="1.5"/></g></g></svg></div>
CSS
.hln-wind-farm {
--c: var(--hln-color, #ff4f2e);
font-size: var(--hln-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 0.75em;
background: #f6f5f1;
overflow: hidden;
--u: 1px;
}
.hln-wind-farm svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-wind-farm svg * {
vector-effect: non-scaling-stroke;
}
.hln-wind-farm-l {
stroke: #9a9ca3;
}
.hln-wind-farm-a {
fill: var(--c);
}
.hln-wind-farm-rot {
animation: hln-wind-farm-rot 6s linear infinite;
animation-delay: var(--delay);
}
@keyframes hln-wind-farm-rot {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hln-wind-farm * {
animation-play-state: paused !important;
animation-delay: calc(var(--delay, 0s) - 0.4s) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hln-wind-farm, .hln-wind-farm *, .hln-wind-farm::before, .hln-wind-farm::after, .hln-wind-farm *::before, .hln-wind-farm *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hln-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hln-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.