<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)) subtract,
#{$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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.