<div class='sym'></div>
<!---
cross-browser canvas version
https://codepen.io/thebabydino/pen/NpoxEe/
-->
$d: 65vmin;
$f: .5;
$t: 1s;
body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
background-color: lightslategray;
}
.sym {
position: relative;
width: $d; height: $d;
border-radius: 50%;
background: linear-gradient(white 50%, black 0);
animation: r 2*$t linear infinite;
&:before, &:after {
--i: 0; // switch
position: absolute;
top: 25%; right: calc((1 - var(--i))*50%); bottom: 25%; left: calc(var(--i)*50%);
border: solid $d/6 hsl(0, 0%, calc(var(--i)*100%));
transform-origin: calc(var(--i)*100%) 50%;
transform: scale($f);
background: hsl(0, 0%, calc((1 - var(--i))*100%));
border-radius: 50%;
animation: s $t ease-in-out calc(var(--i)*#{-$t}) infinite alternate;
content: ''
}
&:after { --i: 1 }
}
@keyframes s { to { transform: scale(2 - $f) } }
@keyframes r { to { transform: rotate(1turn) } }
View Compiled
This Pen doesn't use any external JavaScript resources.