Nezinu kurā sadaļā šo likt, bet gribu padalīties ar savu front-end veikumu. Vējdzirnaviņas, izmantojot SCSS. Tā kā izmēru var mainīt, teorētiski, šo brīnumu var izmantot kā loaderi.
Lai nebūtu tik pliks ieraksts, ievietošu šeit izmantoto kodu. (šis editors aizvāc indentāciju, kas ir problemātiski - yay for text editor power: Imgur)

Demo
CodePen

Haml

.pinwheel
    .blades
        - (1..4).each() do |i|
            .blade

 

SCSS

/**
* <ValuesUserCanChange>
* Units vw and vh can be used and they work
* but it usually bugs out blade positioning
* You might have to change width if you set
* the unit to something else.
* Sadly, percent unit cannot be used.
*/
$pinwheel-width: 300;
$unit: px; // https://www.w3schools.com/cssref/css_units.asp
$animate: true;
$colors: Crimson, YellowGreen, CornflowerBlue, Gold;
$background: #fff;
/**
* </ValuesUserCanChange>
*/

$blade-width: $pinwheel-width / 4;

@mixin bladeColor($c) {
    background-color: $c;
    &::before {border-left-color: $c;}
}

body {
    background: #222;
}

.pinwheel {
    margin: 5% auto;
    background: $background;
    overflow: hidden;
    border-radius: 50%;
    width: #{$pinwheel-width}$unit;
    height: #{$pinwheel-width}$unit;

    @keyframes spin {
        0% {transform: rotate(0deg)}
        100% {transform: rotate(720deg)}
    }

    .blades {
        @if $animate == true {animation: spin 5s infinite ease-out}
        width: #{$pinwheel-width}$unit;
        height: #{$pinwheel-width}$unit;
    }

    .blade {
        display: block;
        width: #{$blade-width}$unit;
        height: #{$blade-width}$unit;
        background-color: blue;
        position: relative;
        z-index: 1;

        &::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            display: inline-block;
            border: #{$blade-width}$unit solid transparent;
            border-top: none;
        }

        &:nth-child(1) {
            @include bladeColor(nth($colors, 1));
            top: #{$blade-width * 2}$unit;
            left: #{$blade-width * 2}$unit;
        }

        &:nth-child(2) {
            @include bladeColor(nth($colors, 2));
            transform: rotate(90deg);
            top: #{$blade-width}$unit;
            left: #{$blade-width}$unit;
        }

        &:nth-child(3) {
            @include bladeColor(nth($colors, 3));
            transform: rotate(180deg);
            top: -#{$blade-width}$unit;
            left: #{$blade-width}$unit;
        }

        &:nth-child(4) {
            @include bladeColor(nth($colors, 4));
            transform: rotate(270deg);
            top: -#{$blade-width * 2}$unit;
            left: #{$blade-width * 2}$unit;
        }
    }
}

Laboja Greed, labots 1x