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

.snowflake {
    font-size: 100px;
    color: snow;
    width: 4em;
    height: 4em;
    display: flex;
    justify-content: center;
    animation: round 10s linear infinite;
}

@keyframes round {
    to {
        transform: rotate(1turn);
    }
}

div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 0.1em;
    height: 2em;
    background-color: currentColor;
    border-radius: 0.05em;
    position: absolute;
    transform-origin: bottom;
    transform: rotate(calc((var(--n)  - 1)* 60deg));
}

div:nth-child(1) {--n: 1;}
div:nth-child(2) {--n: 2;}
div:nth-child(3) {--n: 3;}
div:nth-child(4) {--n: 4;}
div:nth-child(5) {--n: 5;}
div:nth-child(6) {--n: 6;}

div span:nth-child(1) {
    width: 0.2em;
    height: 0.2em;
    background-color: currentColor;
    border-radius: 50%;
}

div span:nth-child(2),
div span:nth-child(3),
div span:nth-child(4),
div span:nth-child(5) {
    width: var(--side-length);
    height: var(--side-length);
    border: 0.1em solid;
    border-width: 0.1em;
    border-style: none solid solid none;
    border-radius: 0.05em;
    transform: rotate(45deg);
}

div span:nth-child(2) {--side-length: 0.5em;}
div span:nth-child(3) {--side-length: 0.4em;}
div span:nth-child(4) {--side-length: 0.3em;}
div span:nth-child(5) {--side-length: 0.3em;}

div span:nth-child(2) {
    margin-top: -0.2em;
}