<div class="loader"></div>

.loader {
  display: grid;
  place-items: center;
  background: #EFFAB4;
  width: 369.623px;
  aspect-ratio: 1;
  --g:/50px 50px radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask: 100.000% 50.000% var(--g),97.553% 65.451% var(--g),90.451% 79.389% var(--g),79.389% 90.451% var(--g),65.451% 97.553% var(--g),50.000% 100.000% var(--g),34.549% 97.553% var(--g),20.611% 90.451% var(--g),9.549% 79.389% var(--g),2.447% 65.451% var(--g),0.000% 50.000% var(--g),2.447% 34.549% var(--g),9.549% 20.611% var(--g),20.611% 9.549% var(--g),34.549% 2.447% var(--g),50.000% 0.000% var(--g),65.451% 2.447% var(--g),79.389% 9.549% var(--g),90.451% 20.611% var(--g),97.553% 34.549% var(--g),radial-gradient(#000 70%,#0000 72%) 50%/315.688px 315.688px no-repeat;
}
.loader:before,
.loader:after{
  content:"";
  aspect-ratio: 1;
  grid-area: 1/1;
}
.loader:before {
  background: #FF9F80;
  width: 211.803px;
  mask: 100.000% 50.000% var(--g),90.451% 79.389% var(--g),65.451% 97.553% var(--g),34.549% 97.553% var(--g),9.549% 79.389% var(--g),0.000% 50.000% var(--g),9.549% 20.611% var(--g),34.549% 2.447% var(--g),65.451% 2.447% var(--g),90.451% 20.611% var(--g),radial-gradient(#000 70%,#0000 72%) 50%/153.884px 153.884px no-repeat;
  transform: rotate(0turn) translate(79px) rotate(0turn);
  animation: r1 5s infinite linear reverse;
}
.loader:after {
  background: #BD1550;
  width: 135.065px;
  aspect-ratio: 1;
  mask: 100.000% 50.000% var(--g),65.451% 97.553% var(--g),9.549% 79.389% var(--g),9.549% 20.611% var(--g),65.451% 2.447% var(--g),radial-gradient(#000 70%,#0000 72%) 50%/68.819px 68.819px no-repeat;
  transform: rotate(0turn) translate(117px) rotate(0turn);
  animation: r2 5s infinite linear reverse -3s;
}

@keyframes r1{
  to {transform: rotate(-1turn) translate(79px) rotate(2turn)}
}
@keyframes r2{
  to {transform: rotate(-1turn) translate(117px) rotate(4turn)}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  overflow: hidden;
  background: #F56991;
}