html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
background: black;
}
$stripe : 10px;
div {
padding: 5vmin;
background-size: $stripe*2;
border-radius: 50%;
background-image:
linear-gradient(
black 0,
black 50%,
white 0,
white 100%
);
animation: move 1s linear infinite;
-webkit-filter:
blur(4px)
contrast(18);
}
@keyframes move {
to {
background-position: 0 $stripe*2;
}
}
div div,
div div div div,
div div div div div div {
transform: rotate(60deg);
}