<!-- nothing -->

$transparent: rgba(255, 255, 255, 0);

$bgcolor: #343844;

$color-2: #FDC536;
$color-3: #E65848;
$color-4: #2AB69D;
$color-1: #FCF2D7;


$size: 3em;
$big-size: $size*2;
$min: $size/2.5;
$max: $min*1.45;
$step: $min*1.3;

HTML {
  height: 100%;
  }
BODY {
  background: 
    radial-gradient(circle at right,
      $transparent $min, 
      $color-1 $min, $color-1 $max,
      $transparent $max
      ) 0 0,
    radial-gradient(circle at left,
      $transparent $min, 
      $color-1 $min, $color-1 $max,
      $transparent $max
      ) 0 $size,
    
    radial-gradient(circle at right,
      $transparent $min, 
      $color-2 $min, $color-2 $max,
      $transparent $max
      ) $step 0,
    radial-gradient(circle at left,
      $transparent $min, 
      $color-2 $min, $color-2 $max,
      $transparent $max
      ) $step $size,
    
    radial-gradient(circle at right,
      $transparent $min, 
      $color-3 $min, $color-3 $max,
      $transparent $max
      ) $step*2 0,
    radial-gradient(circle at left,
      $transparent $min, 
      $color-3 $min, $color-3 $max,
      $transparent $max
      ) $step*2 $size,
    
    radial-gradient(circle at right,
      $transparent $min, 
      $color-4 $min, $color-4 $max,
      $transparent $max
      ) $step*3 0,
    radial-gradient(circle at left,
      $transparent $min, 
      $color-4 $min, $color-4 $max,
      $transparent $max
      ) $step*3 $size
    ;
  background-size:  $big-size $big-size;
  background-color: $bgcolor;
  background-repeat: repeat;
  font: 16px/2 'Trebuchet MS', Verdana, sans-serif;
  }