<section></section>
<section></section>
<section></section>
<section></section>

$c: #3c1021 #611730 #b6929e #ffb1c9 #a5caf6;
$s: 5em;
$o: .19*$s;
$p: calc(50% - .5*#{$o + $s});

body {
	display: grid;
	margin: 0;
	height: 100vh;
	background: 
		repeating-linear-gradient(45deg, 
				nth($c, 2) 0 3px, transparent 0 9px), 
		linear-gradient(150deg, nth($c, 4), nth($c, 5));
}

section {
	&:nth-child(1) {
		background: 
			conic-gradient(at $o $o, transparent 75%, nth($c, 1) 0%) 
				#{$p $p}/ #{$s $s}
	}
	
	&:nth-child(2) {
		background: 
			conic-gradient(at $o $o, nth($c, 1) 75%, transparent 0%) 
				#{$p $p}/ #{$s $s}
	}
	
	&:nth-child(3) {
		background: linear-gradient(75deg, nth($c, 1), nth($c, 3));
		mask: 
			conic-gradient(at $o $o, transparent 75%, nth($c, 1) 0%) 
				#{$p $p}/ #{$s $s}
	}
	
	&:nth-child(4) {
		background: linear-gradient(75deg, nth($c, 1), nth($c, 3));
		mask: 
			conic-gradient(at $o $o, nth($c, 1) 75%, transparent 0%) 
				#{$p $p}/ #{$s $s}
	}
}