<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
div {
display: inline-block;
height: 50px;
width: 80px;
margin: 2px;
border: 1px solid black;
background-repeat: no-repeat;
}
.g1_1 { background-image: repeating-radial-gradient(closest-side circle at -50% -30%, red, green, red); }
.g1_2 { background-image: repeating-radial-gradient(closest-side circle at 50% -30%, red, green, red); }
.g1_3 { background-image: repeating-radial-gradient(closest-side circle at 150% -30%, red, green, red); }
.g1_4 { background-image: repeating-radial-gradient(closest-side circle at 150% 30%, red, green, red); }
.g1_5 { background-image: repeating-radial-gradient(closest-side circle at 130% 150%, red, green, red); }
.g1_6 { background-image: repeating-radial-gradient(closest-side circle at 30% 150%, red, green, red); }
.g1_7 { background-image: repeating-radial-gradient(closest-side circle at -30% 150%, red, green, red); }
.g1_8 { background-image: repeating-radial-gradient(closest-side circle at -30% 50%, red, green, red); }
.g2_1 { background-image: repeating-radial-gradient(farthest-side circle at -50% -30%, red, green, red); }
.g2_2 { background-image: repeating-radial-gradient(farthest-side circle at 50% -30%, red, green, red); }
.g2_3 { background-image: repeating-radial-gradient(farthest-side circle at 150% -30%, red, green, red); }
.g2_4 { background-image: repeating-radial-gradient(farthest-side circle at 150% 30%, red, green, red); }
.g2_5 { background-image: repeating-radial-gradient(farthest-side circle at 130% 150%, red, green, red); }
.g2_6 { background-image: repeating-radial-gradient(farthest-side circle at 30% 150%, red, green, red); }
.g2_7 { background-image: repeating-radial-gradient(farthest-side circle at -30% 150%, red, green, red); }
.g2_8 { background-image: repeating-radial-gradient(farthest-side circle at -30% 50%, red, green, red); }
.g3_1 { background-image: repeating-radial-gradient(closest-side ellipse at -50% -30%, red, green, red); }
.g3_2 { background-image: repeating-radial-gradient(closest-side ellipse at 50% -30%, red, green, red); }
.g3_3 { background-image: repeating-radial-gradient(closest-side ellipse at 150% -30%, red, green, red); }
.g3_4 { background-image: repeating-radial-gradient(closest-side ellipse at 150% 30%, red, green, red); }
.g3_5 { background-image: repeating-radial-gradient(closest-side ellipse at 130% 150%, red, green, red); }
.g3_6 { background-image: repeating-radial-gradient(closest-side ellipse at 30% 150%, red, green, red); }
.g3_7 { background-image: repeating-radial-gradient(closest-side ellipse at -30% 150%, red, green, red); }
.g3_8 { background-image: repeating-radial-gradient(closest-side ellipse at -30% 50%, red, green, red); }
.g4_1 { background-image: repeating-radial-gradient(farthest-side ellipse at -50% -30%, red, green, red); }
.g4_2 { background-image: repeating-radial-gradient(farthest-side ellipse at 50% -30%, red, green, red); }
.g4_3 { background-image: repeating-radial-gradient(farthest-side ellipse at 150% -30%, red, green, red); }
.g4_4 { background-image: repeating-radial-gradient(farthest-side ellipse at 150% 30%, red, green, red); }
.g4_5 { background-image: repeating-radial-gradient(farthest-side ellipse at 130% 150%, red, green, red); }
.g4_6 { background-image: repeating-radial-gradient(farthest-side ellipse at 30% 150%, red, green, red); }
.g4_7 { background-image: repeating-radial-gradient(farthest-side ellipse at -30% 150%, red, green, red); }
.g4_8 { background-image: repeating-radial-gradient(farthest-side ellipse at -30% 50%, red, green, red); }
.g5_1 { background-image: repeating-radial-gradient(closest-corner circle at -50% -30%, red, green, red); }
.g5_2 { background-image: repeating-radial-gradient(closest-corner circle at 50% -30%, red, green, red); }
.g5_3 { background-image: repeating-radial-gradient(closest-corner circle at 150% -30%, red, green, red); }
.g5_4 { background-image: repeating-radial-gradient(closest-corner circle at 150% 30%, red, green, red); }
.g5_5 { background-image: repeating-radial-gradient(closest-corner circle at 130% 150%, red, green, red); }
.g5_6 { background-image: repeating-radial-gradient(closest-corner circle at 30% 150%, red, green, red); }
.g5_7 { background-image: repeating-radial-gradient(closest-corner circle at -30% 150%, red, green, red); }
.g5_8 { background-image: repeating-radial-gradient(closest-corner circle at -30% 50%, red, green, red); }
.g6_1 { background-image: repeating-radial-gradient(farthest-corner circle at -50% -30%, red, green, red); }
.g6_2 { background-image: repeating-radial-gradient(farthest-corner circle at 50% -30%, red, green, red); }
.g6_3 { background-image: repeating-radial-gradient(farthest-corner circle at 150% -30%, red, green, red); }
.g6_4 { background-image: repeating-radial-gradient(farthest-corner circle at 150% 30%, red, green, red); }
.g6_5 { background-image: repeating-radial-gradient(farthest-corner circle at 130% 150%, red, green, red); }
.g6_6 { background-image: repeating-radial-gradient(farthest-corner circle at 30% 150%, red, green, red); }
.g6_7 { background-image: repeating-radial-gradient(farthest-corner circle at -30% 150%, red, green, red); }
.g6_8 { background-image: repeating-radial-gradient(farthest-corner circle at -30% 50%, red, green, red); }
.g7_1 { background-image: repeating-radial-gradient(closest-corner ellipse at -50% -30%, red, green, red); }
.g7_2 { background-image: repeating-radial-gradient(closest-corner ellipse at 50% -30%, red, green, red); }
.g7_3 { background-image: repeating-radial-gradient(closest-corner ellipse at 150% -30%, red, green, red); }
.g7_4 { background-image: repeating-radial-gradient(closest-corner ellipse at 150% 30%, red, green, red); }
.g7_5 { background-image: repeating-radial-gradient(closest-corner ellipse at 130% 150%, red, green, red); }
.g7_6 { background-image: repeating-radial-gradient(closest-corner ellipse at 30% 150%, red, green, red); }
.g7_7 { background-image: repeating-radial-gradient(closest-corner ellipse at -30% 150%, red, green, red); }
.g7_8 { background-image: repeating-radial-gradient(closest-corner ellipse at -30% 50%, red, green, red); }
.g8_1 { background-image: repeating-radial-gradient(farthest-corner ellipse at -50% -30%, red, green, red); }
.g8_2 { background-image: repeating-radial-gradient(farthest-corner ellipse at 50% -30%, red, green, red); }
.g8_3 { background-image: repeating-radial-gradient(farthest-corner ellipse at 150% -30%, red, green, red); }
.g8_4 { background-image: repeating-radial-gradient(farthest-corner ellipse at 150% 30%, red, green, red); }
.g8_5 { background-image: repeating-radial-gradient(farthest-corner ellipse at 130% 150%, red, green, red); }
.g8_6 { background-image: repeating-radial-gradient(farthest-corner ellipse at 30% 150%, red, green, red); }
.g8_7 { background-image: repeating-radial-gradient(farthest-corner ellipse at -30% 150%, red, green, red); }
.g8_8 { background-image: repeating-radial-gradient(farthest-corner ellipse at -30% 50%, red, green, red); }
</style>
</head>
<body>
<div class="g1_1"></div>
<div class="g1_2"></div>
<div class="g1_3"></div>
<div class="g1_4"></div>
<div class="g1_5"></div>
<div class="g1_6"></div>
<div class="g1_7"></div>
<div class="g1_8"></div>
<br>
<div class="g2_1"></div>
<div class="g2_2"></div>
<div class="g2_3"></div>
<div class="g2_4"></div>
<div class="g2_5"></div>
<div class="g2_6"></div>
<div class="g2_7"></div>
<div class="g2_8"></div>
<br>
<div class="g3_1"></div>
<div class="g3_2"></div>
<div class="g3_3"></div>
<div class="g3_4"></div>
<div class="g3_5"></div>
<div class="g3_6"></div>
<div class="g3_7"></div>
<div class="g3_8"></div>
<br>
<div class="g4_1"></div>
<div class="g4_2"></div>
<div class="g4_3"></div>
<div class="g4_4"></div>
<div class="g4_5"></div>
<div class="g4_6"></div>
<div class="g4_7"></div>
<div class="g4_8"></div>
<br>
<div class="g5_1"></div>
<div class="g5_2"></div>
<div class="g5_3"></div>
<div class="g5_4"></div>
<div class="g5_5"></div>
<div class="g5_6"></div>
<div class="g5_7"></div>
<div class="g5_8"></div>
<br>
<div class="g6_1"></div>
<div class="g6_2"></div>
<div class="g6_3"></div>
<div class="g6_4"></div>
<div class="g6_5"></div>
<div class="g6_6"></div>
<div class="g6_7"></div>
<div class="g6_8"></div>
<br>
<div class="g7_1"></div>
<div class="g7_2"></div>
<div class="g7_3"></div>
<div class="g7_4"></div>
<div class="g7_5"></div>
<div class="g7_6"></div>
<div class="g7_7"></div>
<div class="g7_8"></div>
<br>
<div class="g8_1"></div>
<div class="g8_2"></div>
<div class="g8_3"></div>
<div class="g8_4"></div>
<div class="g8_5"></div>
<div class="g8_6"></div>
<div class="g8_7"></div>
<div class="g8_8"></div>
<br>
</body>