<input type="range" step=".01" value="0" min="0" max="1.5">
<div class="flower"></div>
<div class="flower alt"></div>

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

body {
  --a: 0deg; /* this will control the curvature */
}

.flower {
  --s: 300px; /* image size */
  
  --r: calc(var(--s)/(2 + 2*sin(90deg/#{$n})));
  width: var(--s);
  aspect-ratio: 1;
  --R: calc(var(--r)*(sin(180deg/#{$n})/2)*(1/cos(90deg/#{$n} - var(--a)) + 1/cos(90deg/#{$n} + var(--a))));
}
.flower {
  $m1: ();
  $m2: ();
  @for $i from 1 through $n { 
    $m1: append($m1, 
      calc(50% + var(--r)*(1 - (sin(90deg/#{$n})*sin(var(--a)))/cos(90deg/#{$n} - var(--a)))*cos(360deg*#{$i/$n}))
      calc(50% + var(--r)*(1 - (sin(90deg/#{$n})*sin(var(--a)))/cos(90deg/#{$n} - var(--a)))*sin(360deg*#{$i/$n}))
      /var(--R) var(--R) radial-gradient(50% 50%,#00f calc(100% - 1px),#0000) no-repeat, 
    comma);
    $m2: append($m2, 
      calc(50% + var(--r)*(1 + (sin(90deg/#{$n})*sin(var(--a)))/cos(var(--a) + 90deg/#{$n}))*cos((360deg*#{$i} + 180deg)/#{$n}))
      calc(50% + var(--r)*(1 + (sin(90deg/#{$n})*sin(var(--a)))/cos(var(--a) + 90deg/#{$n}))*sin((360deg*#{$i} + 180deg)/#{$n}))
      /var(--R) var(--R) radial-gradient(50% 50%,#f00 calc(100% - 1px),#0000) no-repeat, 
    comma);
  }
  background: #{$m1},#{$m2}
}
.flower.alt {
  $m1: ();
  $m2: ();
  @for $i from 1 through $n { 
    $m1: append($m1, 
      calc(50% + var(--r)*(1 - (sin(90deg/#{$n})*sin(var(--a)))/cos(90deg/#{$n} - var(--a)))*cos(360deg*#{$i/$n}))
      calc(50% + var(--r)*(1 - (sin(90deg/#{$n})*sin(var(--a)))/cos(90deg/#{$n} - var(--a)))*sin(360deg*#{$i/$n}))
      /var(--R) var(--R) radial-gradient(50% 50%,#000 calc(100% - 1px),#0000) no-repeat, 
    comma);
    $m2: append($m2, 
      calc(50% + var(--r)*(1 + (sin(90deg/#{$n})*sin(var(--a)))/cos(var(--a) + 90deg/#{$n}))*cos((360deg*#{$i} + 180deg)/#{$n}))
      calc(50% + var(--r)*(1 + (sin(90deg/#{$n})*sin(var(--a)))/cos(var(--a) + 90deg/#{$n}))*sin((360deg*#{$i} + 180deg)/#{$n}))
      /var(--R) var(--R) radial-gradient(50% 50%,#000 calc(100% - 1px),#0000) no-repeat, 
    comma);
  }
  mask:
    #{$m1},
    radial-gradient(calc(var(--r)*sqrt(sin(2*var(--a))*sin(2*var(--a)) + pow(cos(2*var(--a)) + cos(180deg/#{$n}),2))*(1/cos(90deg/#{$n} - var(--a)) + 1/cos(90deg/#{$n} + var(--a)))*.25),#000 99%,#0000 101%) subtract,
    #{$m2};
   background: linear-gradient(60deg,#2d576d,#e0236f); 
}

input {
  grid-column: span 2;
  width: 100%;
  margin: 20px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 15px; 
  background: #E0E4CC;
}

document.querySelector('input').addEventListener('input', e => {
    document.body.style.setProperty("--a", (25*e.target.value)+"deg");
 });