<img src="https://picsum.photos/id/152/400/400" alt="flowers">
<img src="https://picsum.photos/id/696/400/400" alt="flowers">

$n: 15; /* number of circles */

@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

img {
  --r: 50px; /* control the small circles radius */
  width: calc(var(--r)*(1 + 1/sin(180deg/#{$n})));
  aspect-ratio: 1;
  border-radius: 50%;
  --a: 0deg;
  $m: ();
  @for $i from 1 through ($n) {
    $m: append($m, 
         radial-gradient(#000 70%,#0000 72%) no-repeat
          calc(50% + 50%*cos(360deg*#{$i/$n} + var(--a))) 
          calc(50% + 50%*sin(360deg*#{$i/$n} + var(--a)))/ 
          var(--i,var(--r) var(--r)), 
        comma);
   }
  -webkit-mask: radial-gradient(#000 calc(72% - var(--r)/2),#0000 0),$m;
  --_a: rotate linear infinite;
  animation: 
    var(--_a) 10s,
    var(--_a) 16s reverse paused;
  animation-composition: add;
  cursor: pointer;
  transition: .3s;
}
img:hover {
  animation-play-state: running;
  --i:calc(1.5*var(--r)) calc(1.5*var(--r));
}
@keyframes rotate {
  to{--a:360deg}
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 50px;
  background: #E08E79;
}