body {
    background-color: lightpink;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh;
}

/* HTML: <div class="lollipop"></div> */
.lollipop {
  --r: 150px; /* control the size */
  --c1: #fd99d7;
  --c2: #4e4cb0;

height: calc(2* var(--r));
  aspect-ratio: 1;
  clip-path: circle();
  
  /* Adding continuous rotation */
  animation: rotate 5s linear infinite;
  display:flex;

}

.lollipop:before,
.lollipop:after {
  content: "";
  flex: 1;
  --g1: radial-gradient(50% 50%, var(--c1) 99%, #0000) no-repeat;
  --g2: radial-gradient(50% 50%, var(--c2) 99%, #0000) no-repeat;
  background: var(--g1) calc(sin(60deg)* var(--r)) calc(var(--r) / -2),
              var(--g2) calc(var(--r) / 2) calc(sin(-60deg)* var(--r)),
              var(--g1) 0 calc(-1* var(--r)),
              var(--g2) calc(var(--r) / -2) calc(sin(-60deg)* var(--r)),
              var(--g1) calc(sin(-60deg)* var(--r)) calc(var(--r) / -2),
              var(--g2) calc(-1* var(--r)) 0,
              var(--g1) calc(sin(-60deg)* var(--r)) calc(var(--r) / 2);
  background-size: 200%;
}

.lollipop:after {
   rotate: 180deg;
}

/* Defining the rotation animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground