div.example
  div.rectangle.rectangle--one
  div.rectangle.rectangle--one
    div.circle.circle--small.circle--top-left
    div.circle.circle--large.circle--top-right
    div.circle.circle--large.circle--bottom-right
    div.circle.circle--small.circle--bottom-left
  
div.example
  div.rectangle.rectangle--two
  div.rectangle.rectangle--two
    div.circle.circle--small.circle--top-left
    div.circle.circle--large.circle--top-right
    div.circle.circle--small.circle--bottom-right
    div.circle.circle--small.circle--bottom-left
    
div.example
  div.rectangle.rectangle--three
  div.rectangle.rectangle--three
    div.circle.circle--small.circle--top-left
    div.circle.circle--large.circle--top-right
    div.circle.circle--small.circle--bottom-right
    div.circle.circle--large.circle--bottom-left

$radius-small: 25px;
$radius-large: 200px;
$rect-min: 100px;
$rect-max: 200px;

@mixin conic($color: gold) {
  background-image: conic-gradient(
    $color 0%,
    $color 25%,
    lighten($color, 25%) 25%,
    lighten($color, 25%) 50%,
    $color 50%,
    $color 75%,
    lighten($color, 25%) 75%,
    lighten($color, 25%) 100%,
  )
}

html, body {
  height: 100%;
  font-family: sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.example {
  display: flex;
  flex-direction: column;
}

.rectangle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  margin: 40px;
  background: dodgerblue;
  width: $rect-max;
  height: $rect-min;
  animation: validate 4s infinite;
}

.rectangle--one {
  --ratio: #{min($rect-min / ($radius-large + $radius-large), 1)};
  
  border-radius: $radius-small $radius-large $radius-large $radius-small;
}

.rectangle--two {
  --ratio: #{min($rect-min / ($radius-large + $radius-small), 1)};
  
  border-radius: $radius-small $radius-large $radius-small $radius-small;
}

.rectangle--three {
  --ratio: #{min($rect-min / ($radius-large + $radius-small), 1)};
  
  border-radius: $radius-small $radius-large $radius-small $radius-large;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 999em;
  animation: shrink 4s infinite;
  opacity: 0.6;
}

.circle--large {
  @include conic(gold);
  
  width: $radius-large * 2;
  height: $radius-large * 2;
}

.circle--small {
  @include conic(lightblue);
  
  width: $radius-small * 2;
  height: $radius-small * 2;
}

.circle--top-right {
  top: 0;
  right: 0;
  transform-origin: top right;
}

.circle--bottom-right {
  bottom: 0;
  right: 0;
  transform-origin: bottom right;
}

.circle--bottom-left {
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
}

.circle--top-left {
  top: 0;
  left: 0;
  transform-origin: top left;
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--ratio));
  }
  75% {
    transform: scale(var(--ratio));
  }
  100% {
    transform: scale(1);
  }
}

@keyframes validate {
  0% {
    background-color: orangered;
  }
  49% {
    background-color: orangered;
  }
  50% {
    background-color: limegreen;
  }
  74% {
    background-color: limegreen;
  }
  75% {
    background-color: orangered;
  }
  100% {
    background-color: orangered;
  }
}