<div class="circle1"></div>
.circle1 {
  position: absolute;
  top: 80px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f756c4;
  border-radius: 100px;
  animation: swing linear 5s infinite;
  transform-origin: center -50px 0;
}

.circle1::before {
  position: absolute;
  top: -70px;
  left: 50px;
  content: "";
  border-right: 1px solid #000;
  height: 70px;
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.