<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="generated-background">
      <div class="text">
        <h1>repeating radial background</h1>
        <a
          target="_blank"
          href="https://dribbble.com/shots/2859124-DCX-Hypnotic-Background"
          >original design</a
        >
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <script type="text/javascript">
      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);
    </script>
  </body>
</html>
@import "../common.css";
:root {
  --size: 40px;
  --step: 4px;
  --highlight: white;
  --inverse: currentColor;
}
body {
  color: white;
}

.generated-background {
  width: 100vw;
  height: 100vh;

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

.left,
.right {
  background-image: repeating-radial-gradient(
    circle at var(--origin),
    var(--inverse) 0,
    var(--inverse) var(--size),
    var(--highlight) 0,
    var(--highlight) calc(2 * var(--size))
  );
  animation: water linear 1.8s infinite;
  animation-fill-mode: forwards;
  cursor: default;
}

.left {
  --highlight: currentColor;
  --inverse: white;
  --origin: 100%;
  grid-area: left;
}
.right {
  --origin: 0;
  grid-area: right;
}

@keyframes water {
  5% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  10% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 2 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  15% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(3 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 3 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  20% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(4 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 4 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  25% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(5 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 5 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  30% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(6 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 6 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  35% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(7 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 7 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  40% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(8 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 8 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  45% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(9 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 9 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  50% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--highlight) 0,
      var(--highlight) calc(10 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(var(--size) + 10 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(2 * var(--size))
    );
  }
  55% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(1 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 1 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  60% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 2 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  65% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(3 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 3 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  70% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(4 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 4 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  75% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(5 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 5 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  80% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(6 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 6 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  85% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(7 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 7 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  90% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(8 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 8 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  95% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(9 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 9 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
  100% {
    background-image: repeating-radial-gradient(
      circle at var(--origin),
      var(--inverse) 0,
      var(--inverse) calc(10 * var(--step)),
      var(--highlight) 0,
      var(--highlight) calc(var(--size) + 10 * var(--step)),
      var(--inverse) 0,
      var(--inverse) calc(2 * var(--size))
    );
  }
}

.text {
  position: absolute;
  left: calc(50% + 20px);
  top: 40%;
  padding: 1ch;
}

h1 {
  font-family: "Arial Black";
  color: black;
  width: 10ch;
  text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 0;
  cursor: default;
}

a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: var(--inverse);
  background: rgba(255, 255, 255, 0.7);
  padding: 5px;
  box-shadow: rgba(255, 255, 255, 0.2) 2px 2px 0 0;
  cursor: pointer;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.