ol
  - for (var x = 0; x < 20; x++)
    li
      span
View Compiled
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  background:#000;
}
ol{
  li{
    list-style:none;
    width:40px;
    position:absolute;
    left:calc(50% - 20px);
    transform-origin:top;
    span{
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
      border-radius:50%;
      box-shadow:2px 2px 10px rgba(255,255,255,.6);
      &::before{
        content:"";
        display:block;
        width:10px;
        height:10px;
        position:absolute;
        top:10px;
        left:10px;
        background:#fff;
        border-radius:50%;
        z-index:2;
        filter:blur(3px);
      }
      &::after{
        content:"";
        display:block;
        width:45px;
        height:45px;
        position:absolute;
        background:transparent;
        border-radius:50%;
        z-index:1;
        filter:blur(5px);
        box-shadow:inset -5px -5px 0 2px #333;
      }
    }
    &::before{
      content:"";
      width:2px;
      position:absolute;
      top:0;
      left:calc(50% - 1px);
    }
  }
}
$deg: 20;
@for $i from 0 to $deg{
  ol li:nth-child(#{$i + 1}) {
    height: calc(650px - #{$i * 25}px);
    padding-top: calc(610px - #{$i * 25}px);
    animation:pendulum #{70 / (72 + $i)}s infinite;
    &::before{
      height:calc(610px - #{$i * 25}px);
      background:rgba(($i + 8) * 8,($i + 8) * 8,($i + 8) * 8,1);
    }
    span{
      margin-left:calc(0px - #{$i / 2}px);
      width:calc(40px + #{$i}px);
      height:calc(40px + #{$i}px);
      background:rgba(($i + 8) * 8,($i + 8) * 8,($i + 8) * 8,1);
    }
  }
}
@keyframes pendulum{
  0%{transform:rotate(-25deg);animation-timing-function:cubic-bezier(.45,0,.55,1);}
  50%{transform:rotate(25deg);animation-timing-function:cubic-bezier(.45,0,.55,1);}
  100%{transform:rotate(-25deg);animation-timing-function:cubic-bezier(.45,0,.55,1);}
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.