HTML
<h1>SIX<br/>LOOPS</h1>
<div class="bars">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="circles">
<div class="circle c0">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4">
<div class="circle c5">
<div class="circle c6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bars bottom">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
h1 {
position: absolute;
left: 100px;
top: 420px;
text-align: center;
font-size: 3em;
}
.bars {
position: absolute;
top: 0;
left: 100px;
}
.bars.bottom {
top: 609px;
}
.bar {
position: absolute;
border-top: 1px solid #333333;
width: 200px;
margin-top: 50px;
}
.bars.bottom .bar {
margin-top: 48px;
}
.circles {
position: absolute;
top: 0;
left: 300px;
}
.circle {
position: absolute;
border: 1px solid #333333;
border-left: 0 none;
margin-top: 50px;
}
.c0 {
height: 900px;
width: 450px;
border-radius: 0 450px 450px 0;
}
.c1 {
height: 800px;
width: 400px;
border-radius: 0 400px 400px 0;
}
.c2 {
height: 700px;
width: 350px;
border-radius: 0 350px 350px 0;
}
.c3 {
height: 600px;
width: 300px;
border-radius: 0 300px 300px 0;
}
.c4 {
height: 500px;
width: 250px;
border-radius: 0 250px 250px 0;
}
.c5 {
height: 400px;
width: 200px;
border-radius: 0 200px 200px 0;
}
.c6 {
height: 300px;
width: 150px;
border-radius: 0 150px 150px 0;
}
