<div class="ying-yang">
  <div class="dark">
    <div>
      <div></div>
    </div>
  </div>
  <div class="light">
    <div>
      <div></div>
    </div>
  </div>
</div>
.ying-yang {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}

.ying-yang > div {
  width: 100%;
  height: 50%;
  position: relative;
}

.ying-yang > .dark {
  background-color: #000;
}

.ying-yang > .light {
  background-color: #fff;
}

.ying-yang > div > div {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
}

.ying-yang > .dark > div {
  background-color: #000;
  top: 50%;
  right: 0;
  animation: resize-dark 3s infinite linear;
  animation-direction: alternate-reverse;
}

@keyframes resize-dark {
  from { width: 25%; height: 50%; top: 75% }
  to { width: 75%; height: 150%; top: 25% }
}

.ying-yang > .light > div {
  background-color: #fff;
  top: -50%;
  left: 0;
  animation: resize-light 3s infinite linear;
  animation-direction: alternate-reverse;
}

@keyframes resize-light {
  from { width: 75%; height: 150%; top: -75% }
  to { width: 25%; height: 50%; top: -25% }
}

.ying-yang > div > div > div {
  width: 25%;
  height: 25%;
  border-radius: 50%;
  z-index: 1;
}

.ying-yang > .dark > div > div {
  background-color: #fff;
}

.ying-yang > .light > div > div {
  background-color: #000;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('//transparenttextures.com/patterns/dark-wall.png'), radial-gradient(circle at center, #61666b 0%,#28343b 100%);
  overflow: hidden;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.