<div class="flower"></div>
<div class="flower alt"></div>

$n: 12; /* the number of circles/petals */

.flower {
  --b: 10px; /* the border thickness*/

  width: 300px;
  aspect-ratio: 1;
  --r:calc((50% + var(--b)/(2*sin(180deg/#{$n})))/(1 + 1/sin(180deg/#{$n})));
  $m: (); /* empty variable */
  @for $i from 1 through ($n) { /* loop through the number of circles*/
    $m: append($m, 
      radial-gradient(50% 50%,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)) 98%,#0000) no-repeat
      calc(50% + 50%*cos(360deg*#{$i/$n})) 
      calc(50% + 50%*sin(360deg*#{$i/$n}))
     / calc(2*var(--r)) calc(2*var(--r)), 
    comma);
  }
  mask:
    radial-gradient(100% 100%,
    var(--alt,#0000 calc(var(--r)/tan(180deg/#{$n}) - var(--b)/(2*tan(180deg/#{$n}))),
    #000 calc(var(--r)/tan(180deg/#{$n}) - var(--b)/(2*tan(180deg/#{$n})) + 1px))) intersect, #{$m};
  background: linear-gradient(60deg,#2d576d,#e0236f)
}
.alt {
  --alt: #000 calc(var(--r)/tan(180deg/#{$n}) - var(--b)/(2*tan(180deg/#{$n}))),
    #0000 calc(var(--r)/tan(180deg/#{$n}) - var(--b)/(2*tan(180deg/#{$n})) + 1px);
}


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