body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    overflow: hidden;
}

.penrose {
    width: 20em;
    height: 20em;
    position: relative;
    color: red;
    top: -1em;
    left: -3em;
    animation: rotating 5s linear infinite;
    transform-origin: 66% 66%;
}

@keyframes rotating {
    to {
        transform: rotate(1turn);
        filter: hue-rotate(1turn);
    }
}

.penrose div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    clip-path: polygon(
        57% 0,
        75% 0,
        26% 85%,
        89.5% 85%,
        98.4% 100%,
        0 100%
    );
    transform: rotate(calc((var(--n) - 1) * 120deg));
    filter: brightness(calc(1 - (var(--n) - 1) * 0.33));
}

.penrose div:nth-child(2) {top: 18.3%; left: 43.3%;}
.penrose div:nth-child(3) {top: 46.5%; left: 5.9%;}

.penrose div:nth-child(1) {--n: 1;}
.penrose div:nth-child(2) {--n: 2;}
.penrose div:nth-child(3) {--n: 3;}