<div class="background"></div>
body {
  padding: 3em 0;
  display: flex;
  justify-content: center;
}

.background {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
  background-color: red;
  background-repeat: no-repeat;
  background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
  background-size: 50px 50px;
  width: 100px;
  height: 100px;
  position: relative;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.