- 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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.