$color-3: #E9F1DF;
$color-3-t: transparentize($color-3, 1);

$color-4: lightblue;
$color-4-t: transparentize($color-4, 1);

$size: 2.8em;
$size-half: $size/2;
$begin: $size/9.53;
$step: $size/18;
$space: $size/8.4;
$step-s: $step/1.5;

$step-b: $space;
$step-e: $space + $step;
$step-b-2: $space*2 + $step;
$step-e-2: $space*2 + $step*2;
$step-b-3: $space*3 + $step*2;
$step-e-3: $space*3 + $step*3;

$small-b: ($space*3 + $step)/2;
$small-e: $small-b + $step;
$small-b-2: $small-b + $step + $space;
$small-e-2: $small-b + $step*2 + $space;

$small-c: $size + $space - $step/1.9;



$bgcolor: $color-4;

HTML {
  height: 100%;
  }

BODY {
  background: 
    radial-gradient(circle at right,
      $color-3-t $step-b,
      $color-3 $step-b, $color-3 $step-e,
      $color-3-t $step-e, $color-3-t $step-b-2,
      $color-3 $step-b-2, $color-3 $step-e-2,
      $color-3-t $step-e-2, $color-3-t $step-b-3,
      $color-3 $step-b-3, $color-3 $step-e-3,
      $color-3-t $step-e-3
      ) 0 0,
    radial-gradient(circle at left,
      $color-3-t $small-b,
      $color-3 $small-b, $color-3 $small-e,
      $color-3-t $small-e, $color-3-t $small-b-2,
      $color-3 $small-b-2, $color-3 $small-e-2,
      $color-3-t $small-e-2
      ) 0 $small-c,
    
    linear-gradient(to right top,
      $color-3 $step,
      $color-3-t $step
      ) $small-e-2 $step,
     linear-gradient(to left top,
      $color-3 $step,
      $color-3-t $step
      ) $small-e-2 $step,
    linear-gradient(to right bottom,
      $color-3 $step,
      $color-3-t $step
      ) $small-e-2 $step,
     linear-gradient(to left bottom,
      $color-3 $step,
      $color-3-t $step
      ) $small-e-2 $step
    ;
  background-size: $size $size;
  background-color: $bgcolor;
  }