(Animasi) Peralihan pai ke bunga

Mempamer

<div class="labu">
<div id="wrapper" data-configuration="1">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
</div>
  <style>
    .labu * {
  box-sizing: border-box;  
}
.labu {
  margin: auto;
  height: 80vh;
  width: 100%;
  overflow: hidden;
  background-image: radial-gradient(
      circle at 46% 40%,
      rgba(228, 228, 228, 0.06) 0%,
      rgba(228, 228, 228, 0.06) 13%,
      transparent 13%,
      transparent 100%
    ),
    radial-gradient(
      circle at 11% 41%,
      rgba(198, 198, 198, 0.06) 0%,
      rgba(198, 198, 198, 0.06) 19%,
      transparent 19%,
      transparent 100%
    ),
    radial-gradient(
      circle at 52% 23%,
      rgba(14, 14, 14, 0.06) 0%,
      rgba(14, 14, 14, 0.06) 69%,
      transparent 69%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 85%,
      rgba(148, 148, 148, 0.06) 0%,
      rgba(148, 148, 148, 0.06) 44%,
      transparent 44%,
      transparent 100%
    ),
    radial-gradient(
      circle at 57% 74%,
      rgba(232, 232, 232, 0.06) 0%,
      rgba(232, 232, 232, 0.06) 21%,
      transparent 21%,
      transparent 100%
    ),
    radial-gradient(
      circle at 59% 54%,
      rgba(39, 39, 39, 0.06) 0%,
      rgba(39, 39, 39, 0.06) 49%,
      transparent 49%,
      transparent 100%
    ),
    radial-gradient(
      circle at 98% 38%,
      rgba(157, 157, 157, 0.06) 0%,
      rgba(157, 157, 157, 0.06) 24%,
      transparent 24%,
      transparent 100%
    ),
    radial-gradient(
      circle at 8% 6%,
      rgba(60, 60, 60, 0.06) 0%,
      rgba(60, 60, 60, 0.06) 12%,
      transparent 12%,
      transparent 100%
    ),
    linear-gradient(90deg, yellow, blue);
  display: grid;
  place-items: center;
  border-radius: 12px;
}
@keyframes spin{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
#wrapper{
    animation: spin 4000ms ease-in-out infinite;
  height: 80vmin;
  width: 80vmin;
  position: relative;
  scale: .5;
}
#wrapper > .box{
  height: 50%;
  width: 50%;
  position: absolute;
  transition: all ease-in-out 800ms;
}
#wrapper > .box:nth-child(1){
  background: #0A2647;
  z-index: 2;
}
#wrapper > .box:nth-child(2){
  background: #205295;
  z-index: 1;
}
#wrapper > .box:nth-child(3){
  background: #144272;
  z-index: 2;
}
#wrapper > .box:nth-child(4){
  background: #2C74B3;
  z-index: 1;
}
#wrapper[data-configuration="1"] > .box:nth-child(1) {  
  left: 0%;
  top: 0%;
  height: 50%;
  width: 50%;
  border-radius: 100% 0 0 0;
}
#wrapper[data-configuration="1"] > .box:nth-child(2) {  
  right: 0%;
  top: 0%;
  height: 50%;
  width: 50%;
  border-radius: 0 100% 0 0;
}
#wrapper[data-configuration="1"] > .box:nth-child(3) {  
  left: 0%;
  bottom: 0%;
  height: 50%;
  width: 50%;
  border-radius: 0 0 0 100%;
}
#wrapper[data-configuration="1"] > .box:nth-child(4) {  
  right: 0%;
  bottom: 0%;
  height: 50%;
  width: 50%;
  border-radius: 0 0 100%;
}
#wrapper[data-configuration="2"] > .box:nth-child(1) {  
  left: 50%;
  top: 0%;
  height: 50%;
  width: 50%;
  border-radius: 100% 0 100% 0;
}
#wrapper[data-configuration="2"] > .box:nth-child(2) {  
  right: 50%;
  top: 0%;
  height: 50%;
  width: 50%;
  border-radius: 0 100% 0 100%;
}
#wrapper[data-configuration="2"] > .box:nth-child(3) {  
  left: 50%;
  bottom: 0%;
  height: 50%;
  width: 50%;
  border-radius: 0 100% 0 100%;
}
#wrapper[data-configuration="2"] > .box:nth-child(4) {  
  right: 50%;
  bottom: 0%;
  height: 50%;
  width: 50%;
  border-radius: 100% 0 100% 0;
}
#wrapper[data-configuration="3"] > .box:nth-child(1) {  
  left: 0%;
  top: 0%;
  height: 100%;
  width: 30%;
  border-radius: 50px 0 0 50px;
}
#wrapper[data-configuration="3"] > .box:nth-child(2) {  
  right: 30%;
  top: 0%;
  height: 50%;
  width: 40%;
  border-radius: 0 0 50px 50px;
}
#wrapper[data-configuration="3"] > .box:nth-child(3) {  
  left: 30%;
  top: 50%;
  height: 50%;
  width: 40%;
  border-radius: 50px 50px 0 0;
}
#wrapper[data-configuration="3"] > .box:nth-child(4) {  
  right: 0%;
  top: 0%;
  height: 100%;
  width: 30%;
  border-radius: 0 50px 50px 0;
}
  </style>
  <script>
    const wrapper = document.getElementById("wrapper")
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
let index = 1
setInterval(() => {
  if(index == 2){
    wrapper.dataset.configuration = rand(1,1)
    index = 1
  }
  else{
    wrapper.dataset.configuration = rand(2,2)
    index = 2
  }
}, 2500)
</script>

Rujukan JS di codepen.io/b1ngus/pen/KKBMZjq