<div class="flower"></div>
$n: 10; /* the number of circles/petals */

.flower {
  width: 400px;
  aspect-ratio: 1;
  --r: calc(50%/(1 + 1/sin(90deg/#{$n})));
  --g:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(50% 50%,#000 calc(100% - 1px),#0000) no-repeat;
  $m1: ();
  $m2: ();
  @for $i from 1 through $n { 
    $m1: append($m1, 
     calc(50% + 50%*cos(360deg*#{$i/$n})) 
     calc(50% + 50%*sin(360deg*#{$i/$n}))
     var(--g), 
    comma);
    $m2: append($m2,
      calc(50% + 50%*cos((360deg*#{$i} + 180deg)/#{$n})) 
      calc(50% + 50%*sin((360deg*#{$i} + 180deg)/#{$n}))
      var(--g), 
    comma);
  }
  mask:
    #{$m1},
    radial-gradient(100% 100%,#000 calc(var(--r)/tan(90deg/#{$n})),#0000 calc(var(--r)/tan(90deg/#{$n}) + 1px)) intersect,
    radial-gradient(#000 0 0) exclude,
    #{$m2};
  background: linear-gradient(60deg,#2d576d,#e0236f);
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  grid-auto-flow: column;
  background: #E0E4CC;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.