Third circle

<body>

    <div class="circle shadow"></div>

    <div class="circle big"></div>
    <div class="circle middle"></div>
    <div class="circle small"></div>
    <div class="circle tiny"></div>

  </body>

body {
    background-color: #c7c928;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  .circle {
     border-radius: 50%;
  }

  .shadow {
    position: relative;
    filter: blur(50px);
    width: 70vw;
    height: 70vw;
    background-color: #109c00;
  }

  .big {
    position: absolute;
    width: 70vw;
    height: 70vw;
    background-color: #c6c7ff;
    animation: changeb 8s infinite;
  }

  @keyframes changeb {
    0% {
      background-color: #c6c7ff;
    }
    50% {
      background-color: #8a00ff;
    }
    100% {
      background-color: #c6c7ff;
    }
  }

  .middle {
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: #a895ff;
    animation: changem 8s infinite;
  }

  @keyframes changem {
    0% {
      background-color: #a895ff;
    }
    50% {
      background-color: #9764ff;
    }
    100% {
      background-color: #a895ff;
    }
  }

  .small {
    position: absolute;
    width: 50vw;
    height: 50vw;
    background-color: #9764ff;
    animation: changes 8s infinite;
  }

  @keyframes changes {
    0% {
      background-color: #9764ff;
    }
    50% {
      background-color: #a895ff;
    }
    100% {
      background-color: #9764ff;
    }
  }

  .tiny {
    position: absolute;
    width: 40vw;
    height: 40vw;
    background-color: #8a00ff;
    animation: changet 8s infinite;
  }

  @keyframes changet {
    0% {
      background-color: #8a00ff;
    }
    50% {
      background-color: #c6c7ff;
    }
    100% {
      background-color: #8a00ff;
    }
  }