<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.