<div id="repeating"></div>
// #divtober 13: Repeating
// a.singlediv.com/divtober2020

body
  height: 100vh

#repeating
  width: 100%
  height: 100%
  font-size: 20px
  background-color: goldenrod
  background-image: radial-gradient(circle at 100% 100%, gold          1.2em,
                                                         goldenrod     1.25em,
                                                         goldenrod     2.5em,
                                                         alpha(gold,0) 2.5em),
                    linear-gradient( 135deg, goldenrod 1.75em, alpha(gold,0) 1.75em),
                    radial-gradient(circle at 0 100%,    goldenrod     1.2em,
                                                         darkslategray 1.25em,
                                                         darkslategray 2.5em,
                                                         transparent   2.5em),
                    linear-gradient(-135deg, darkslategray 1.75em, transparent 1.75em),
                    radial-gradient(circle at 100% 0,    goldenrod     1.2em,
                                                         darkslategray 1.25em,
                                                         darkslategray 2.5em,
                                                         transparent   2.5em),
                    linear-gradient(  45deg, darkslategray 1.75em, transparent 1.75em),
                    radial-gradient(circle at 0 0,       gold          1.2em,
                                                         goldenrod     1.25em,
                                                         goldenrod     2.5em,
                                                         transparent   2.5em),
                    linear-gradient( -45deg, goldenrod 1.75em, alpha(gold,0) 1.75em),
                    radial-gradient(circle at 100% 100%, goldenrod     1.9em,
                                                         darkslategray 1.95em,
                                                         darkslategray 2.5em,
                                                         transparent   2.5em),
                    linear-gradient( 135deg, darkslategray 1.75em, transparent 1.75em),
                    radial-gradient(circle at 0 100%,    gold          1.9em,
                                                         goldenrod     1.95em,
                                                         goldenrod     2.5em,
                                                         alpha(gold,0) 2.5em),
                    linear-gradient(-135deg, goldenrod 1.75em, alpha(gold,0) 1.75em),
                    radial-gradient(circle at 100% 0,    gold 1.9em,
                                                         goldenrod     1.95em,
                                                         goldenrod     2.5em,
                                                         transparent   2.5em),
                    linear-gradient(  45deg, goldenrod 1.75em, alpha(gold,0) 1.75em),
                    radial-gradient(circle at 0 0,       goldenrod     1.9em,
                                                         darkslategray 1.95em,
                                                         darkslategray 2.5em,
                                                         transparent   2.5em),
                    linear-gradient( -45deg, darkslategray 1.75em, transparent 1.75em),
                    linear-gradient(  45deg, darkslategray 1.75em, transparent 1.75em),
                    linear-gradient( 135deg, gold 1.75em, alpha(gold,0) 1.75em),
                    linear-gradient( -45deg, gold 1.75em, alpha(gold,0) 1.75em),
                    linear-gradient(-135deg, darkslategray 1.75em, transparent 1.75em)
  background-size: 15em 5em
  background-position: 0 0, -2.5em 2.5em,
                       0 0,  2.5em 2.5em,
                       0 0, -2.5em 2.5em,
                       0 0,  2.5em 2.5em,
                       5em 2.5em, 2.5em 0,
                       5em 2.5em, 7.5em 0,
                       5em 2.5em, 2.5em 0,
                       5em 2.5em, 7.5em 0,
                       7.5em 2.5em,
                       10em 0,
                       10em 0,
                       12.5em 2.5em
View Compiled
// @lynnandtonic
// a.singlediv.com
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.