- const spread = (t, i) => (Math[t](i*Math.PI/2)*40).toFixed(0)
mixin nest(n)
g.single(opacity=(4-n ? 0.8 : 1))
use(href='#spinner' fill=f)
if --n
+nest(n)
svg(viewBox='-50 -50 100 100' width=200)
defs
g#spinner
each f, i in ['#c6c09c', '#ffc98b', '#ffb284', '#e79796']
circle(r=9 fill=f cx=spread('cos', i) cy=spread('sin', i))
g(transform='scale(1.666)')
+nest(4)
View Compiled
body
display: grid
place-content: center
background: #222
height: 100vh
margin: 0
.single
transform: scale(0.6) rotate(0)
animation: spin 2s ease-in-out infinite
@keyframes spin
to
transform: scale(0.6) rotate(1turn)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.