<div class="form-group">
  <label>Size
    <input type="range" id="slider" min="5" max="20" value="15" />
  </label>
</div>
<div class="container">
  <span class="petal"></span>
  <span class="petal"></span>
  <span class="petal"></span>
  <span class="petal"></span>
  <div class="petal"></div>
  <span class="petal"></span>
  <span class="petal"></span>
  <span class="petal"></span>
</div>

:root {
  --size: 15rem;
}
html {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.form-group {
  margin-bottom: 2rem;
  display: grid;
  place-items: center;
  label {
    display: flex;
    align-items: center;
  }
}
.container {
  width: var(--size);
  height: var(--size);
  background: #fff;
  border-radius: 16.667%;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease-in-out;
}
.petal {
  height: 37.5%;
  width: 22.5%;
  border-radius: 50% / 30%;
  position: absolute;
  transform-origin: center 105%;
  transform: rotate(calc((var(--n) - 1) * 45deg));
  background: var(--bg);
  top: 10%;
  mix-blend-mode: multiply;
}

$bg: #FAAA31, #F6E422, #B9D753, #6CBEB0, #79ADDC, #A48DC1, #D388B1, #F37A5D;

@for $i from 1 through 8 {
  .petal:nth-child(#{$i}) {
    --n: #{$i};
    --bg: #{nth($bg, $i)};
  }
}

const slider = document.getElementById("slider");
const root = document.documentElement;

slider.addEventListener("input", (e) => {
  root.style.setProperty("--size", `${e.target.value}rem`);
});