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