<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}
  }
}