<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="generated-background">
      <h1>repeating radial background</h1>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>
:root {
  --size: 40px;
}
body {
  color: white;
  margin: 0;
  padding: 0;
}
.generated-background {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template-areas: "left right";
  grid-row: 1fr 1fr;
  transition: all linear 0.1s;
}

.left {
  grid-area: left;
  background-image: repeating-radial-gradient(
    circle at 100%,
    white 0,
    white var(--size),
    currentColor 0,
    currentColor calc(2 * var(--size))
  );
}
.right {
  grid-area: right;
  background-image: repeating-radial-gradient(
    circle at 0,
    currentColor 0,
    currentColor var(--size),
    white 0,
    white calc(2 * var(--size))
  );
}

h1 {
  color: black;
  position: absolute;
  font-family: "Arial Black";
  left: calc(50% + 20px);
  top: 40%;
  width: 10ch;
  padding: 1ch;
  text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 0;
}
const changeColor = () => {
        document.body.style =
          "color: #" +
          [1, 2, 3, 4, 5, 6]
            // generates lighter color, add 8 to a random number between 0 and 8
            .map(_ => "0123456789abcdef"[Math.floor(Math.random() * 8 + 8)])
            .join("");
      };
      window.onload = changeColor;
      document.body.addEventListener("click", changeColor);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.