<!-- nothing -->
$bgcolor: #E9F1DF;
$transparent: rgba(255, 255, 255, 0);
$color-1: #36B1BF;
$color-2: #4AD9D9;
$color-3: #E9F1DF;
$color-4: #F5A503;
$color-5: #F2385A;
$size: 3em;
$big-size: $size*2;
$min: 0;
$max: $size*.11;
$diff: $max - $min;
HTML {
height: 100%;
}
BODY {
background:
linear-gradient(to right,
$transparent $min,
$color-1 $min, $color-1 $max,
$transparent $max
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-1 $min, $color-1 $max,
$transparent $max
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-2 $min, $color-2 $max,
$transparent $max
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-2 $min, $color-2 $max*2,
$transparent $max*2
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-2 $min, $color-2 $max,
$transparent $max
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-2 $min, $color-2 $max*2,
$transparent $max*2
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-3 $min, $color-3 $max*2,
$transparent $max*2
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-3 $min, $color-3 $max*3,
$transparent $max*3
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-3 $min, $color-3 $max*2,
$transparent $max*2
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-3 $min, $color-3 $max*3,
$transparent $max*3
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-4 $min, $color-4 $max*3,
$transparent $max*3
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-4 $min, $color-4 $max*4,
$transparent $max*4
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-4 $min, $color-4 $max*3,
$transparent $max*3
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-4 $min, $color-4 $max*4,
$transparent $max*4
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-5 $min, $color-5 $max*4,
$transparent $max*4
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-5 $min, $color-5 $max*5,
$transparent $max*5
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-5 $min, $color-5 $max*4,
$transparent $max*4
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-5 $min, $color-5 $max*5,
$transparent $max*5
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-1 $min, $color-1 $max*5,
$transparent $max*5
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-1 $min, $color-1 $max*6,
$transparent $max*6
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-1 $min, $color-1 $max*5,
$transparent $max*5
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-1 $min, $color-1 $max*6,
$transparent $max*6
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-2 $min, $color-2 $max*6,
$transparent $max*6
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-2 $min, $color-2 $max*7,
$transparent $max*7
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-2 $min, $color-2 $max*6,
$transparent $max*6
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-2 $min, $color-2 $max*7,
$transparent $max*7
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-3 $min, $color-3 $max*7,
$transparent $max*7
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-3 $min, $color-3 $max*8,
$transparent $max*8
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-3 $min, $color-3 $max*7,
$transparent $max*7
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-3 $min, $color-3 $max*8,
$transparent $max*8
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-4 $min, $color-4 $max*8,
$transparent $max*8
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-4 $min, $color-4 $max*9,
$transparent $max*9
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-4 $min, $color-4 $max*8,
$transparent $max*8
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-4 $min, $color-4 $max*9,
$transparent $max*9
) 0 0,
linear-gradient(to left,
$transparent $min,
$color-5 $min, $color-5 $max*9,
$transparent $max*9
) 0 0,
linear-gradient(to right,
$transparent $min,
$color-5 $min, $color-5 $max*10,
$transparent $max*10
) 0 0,
linear-gradient(to bottom,
$transparent $min,
$color-5 $min, $color-5 $max*9,
$transparent $max*9
) 0 0,
linear-gradient(to top,
$transparent $min,
$color-5 $min, $color-5 $max*10,
$transparent $max*10
) 0 0
;
background-size: $big-size $big-size;
background-color: $bgcolor;
background-repeat: repeat;
font: 16px/2 'Trebuchet MS', Verdana, sans-serif;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.