<div class="flower"></div>
$n: 12; /* the number of circles/petals */
.flower {
--r: 30px; /* the radius of the small circles */
width: calc(2*var(--r)*(1 + 1/sin(180deg/#{$n})));
aspect-ratio: 1;
$m: (); /* empty variable */
/* loop through the number of circles*/
@for $i from 1 through ($n) {
$m: append($m,
radial-gradient(50% 50%,#000 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(#000 calc(var(--r)/tan(180deg/#{$n})),#0000 calc(var(--r)/tan(180deg/#{$n}) + 1px)),#{$m};
background: linear-gradient(60deg,#2d576d,#e0236f)
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 30px;
background: #E0E4CC;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.