<div class="blob"></div>
@use 'sass:math';
$n: 15;
$d: 20%;
.blob {
width: 300px;
aspect-ratio: 1;
background: linear-gradient(60deg in hsl, #C02942, #ECD078);
$xc:(); $yc:();
@for $i from 1 through $n {
$r: (50% - random($d));
$xc: append($xc,50% + $r*math.cos(360deg*$i/$n));
$yc: append($yc,50% + $r*math.sin(360deg*$i/$n));
}
$m:();
$m: append($m,from
(nth($xc,1) + nth($xc,$n))/2
(nth($yc,1) + nth($yc,$n))/2,comma);
@for $i from 1 through ($n - 1) {
$m: append($m, curve
to (nth($xc,$i) + nth($xc,$i+1))/2
(nth($yc,$i) + nth($yc,$i+1))/2
with nth($xc,$i) nth($yc,$i),comma);
}
$m: append($m, curve
to (nth($xc,1) + nth($xc,$n))/2
(nth($yc,1) + nth($yc,$n))/2
with nth($xc,$n) nth($yc,$n),comma);
clip-path: shape(#{$m})
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.