#1 Simply Square CodeNow
<div></div>
<style>
*{
margin: 0px;
}
div {
width: 200px;
height: 200px;
background: #dd6b4d;
background: #b5e0ba;
}
body{
background:#5d3a3a;
}
</style>
#2 Carrom CodeNow
<div id ="a"></div>
<div id ="b"></div>
<div id ="c"></div>
<div id ="d"></div>
<style>
body{
background: #62374e;
margin: 0px;
}
div{
background: #fdc57b;
height: 50px;
width: 50px;
}
#a{
margin-top: 50px;
margin-left: 50px;
}
#b{
margin-top: 100px;
margin-left: 50px;
}
#c{
margin-top:-200px;
margin-left: 300px;
}
#d{
margin-top:100px;
margin-left:300px;
}
</style>
#3 Push Button CodeNow
<div id="rect">
<div id="middle">
<div id="inner">
</div>
</div>
</div>
<style>
body{
background: #6592CF;
margin: 0px;
}
#rect{
background: #243D83;
height: 150px;
width: 300px;
margin: 75px auto;
}
#middle{
background: #243D83;
border: 50px solid #6592CF;
border-radius: 50%;
height: 150px;
width: 150px;
margin: auto;
position: relative;
bottom: 50px;
}
#inner{
background: #EEB850;
border-radius: 50%;
height: 50px;
width: 50px;
margin: 50px auto;
}
</style>
#4 Ups n Down CodeNow
<div id ="a">
<div id ="b">
<div id ="c">
</div>
</div>
</div>
<style>
body{
margin: 0px;
background: #62306D;
}
div {
width: 100px;
height: 100px;
}
#a {
background: #F7EC7D;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
top: 150px;
left: 50px;
}
#b {
background: #F7EC7D;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
position: absolute;
top: -100px;
left: 100px;
}
#c {
background: #F7EC7D;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
top: 100px;
left: 100px;
</style>
#5 Acid Rain CodeNow
<div id = "a">
<div id = "b">
<div id = "c">
</div>
</div>
</div>
<style>
body{
margin: 0;
background: #0B2429;
}
#a{
background: #F3AC3C;
height: 120px;
width: 120px;
border-radius: 50%;
position: relative;
top: 30px;
left: 200px;
}
#b{
background: #998235;
border-radius: 50% 0% 50% 50%;
height: 120px;
width: 120px;
position: absolute;
top: 60px;
right: 60px;
}
#c{
background: #F3AC3C;
height: 120px;
width: 120px;
border-radius: 50% 0% 50% 50%;
position: absolute;
top: 60px;
right: 60px;
}
</style>
#6 Missing Slice CodeNow
<div class = "pie">
<div id ="a">
<div id ="b">
<div id ="c">
</div>
</div>
<style>
body{
margin: 0;
background: #E3516E;
}
.pie{
position: relative;
top: 50px;
left: 100px;
}
#a{
height: 100px;
width: 100px;
background: #51B5A9;
border-radius: 100% 0% 0% 0%;
}
#b{
height: 100px;
width: 100px;
background: #FADE8B;
border-radius: 0% 1000% 0% 0%;
position: absolute;
left: 100px;
}
#c{
height: 100px;
width: 100px;
background: #F7F3D7;
border-radius: 0% 0% 0% 100%;
position: absolute;
top: 100px;
left:-100px;
}
</style>
#7 Leafy Trail CodeNow
<div class="group">
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
</div>
<style>
body{
background: #0B2429;
margin: 0;
}
.group{
position:relative;
top: 75px;
left: 75px;
}
#a{
height: 150px;
width: 150px;
background: #1A4341;
border-radius: 65% 0;
}
#b{
height: 150px;
width: 150px;
background: #998235;
border-radius: 65% 0;
position: absolute;
left: 50px;
}
#c{
height: 150px;
width: 150px;
background: #F3AC3C;
border-radius: 65% 0;
position: absolute;
left: 50px;
}
</style>
#8 Forking Crazy CodeNow
<div class = "group">
<div id = "base">
<div id = "a">
<div id = "b">
<div id = "c">
<div id = "d">
<div id = "e">
<div id = "f">
<div id = "g">
<div id = "bottom">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
body{
margin: 0;
background: #6592CF;
}
.group{
position: relative;
top: 110px;
left: 130px;
}
#base{
height: 140px;
width: 140px;
background: #060F55;
border-radius: 0% 0% 50% 50%;
}
#a{
height: 110px;
width: 20px;
background: #060F55;
position: absolute;
top: -60px;
border-radius: 50px;
}
#b{
height: 110px;
width: 20px;
background: #6592CF;
position: absolute;
top: 0px;
right: -20px;
border-radius: 50px;
}
#c{
height: 110px;
width: 20px;
background: #060F55;
position: absolute;
top: 0px;
right: -20px;
border-radius: 50px;
}
#d{
height: 110px;
width: 20px;
background: #6592CF;
position: absolute;
top: 0px;
right: -20px;
border-radius: 50px;
}
#e{
height: 110px;
width: 20px;
background: #060F55;
position: absolute;
top: 0px;
right: -20px;
border-radius: 50px;
}
#f{
height: 110px;
width: 20px;
background: #6592CF;
position: absolute;
top: 0px;
right: -20px;
border-radius: 50px;
}
#g{
height: 110px;
width: 20px;
background: #060F55;
position: absolute;
top: 0px;
right: -20px;
border-radius: 50px;
}
#bottom{
height: 70px;
width: 20px;
background: #060F55;
position: absolute;
top: 199px;
left: -60px;
}
</style>
#9 Tesseract CodeNow
<div id ="rect">
<div id ="square"></div>
</div>
<div id="square2"></div>
<div id ="circle"></div>
<style>
body{
background: #222730;
margin: 0px;
position: relative;
}
#rect{
height: 150px;
width: 400px;
background: #4CAAB3;
position: absolute;
top: 75px;
}
#square{
height: 150px;
width: 150px;
transform: rotate(45deg);
border: 50px solid #222730;
margin: auto;
position: absolute;
top: -50px;
left: 75px;
}
#square2{
background: #4CAAB3;
height: 151px;
width: 151px;
margin: auto;
position: relative;
top: 75px;
transform: rotate(45deg);
}
#circle{
height: 50px;
width: 50px;
background: #393E46;
border-radius: 50%;
position: relative;
top: -26px;
margin: auto;
}
</style>
#10 Cloaked Spirits CodeNow
<div class="container">
<div id="base">
<div id="pillar">
<div id="top">
<div id="left">
<div id="right">
</div>
</div>
</div>
</div>
</div>
</div>
<style>
body{
background: #62306D;
margin: 0;
}
.container{
position: relative;
}
#base{
height: 100px;
width: 300px;
background: #F7EC7D;
margin: 200px auto;
}
#pillar{
height: 100px;
width: 100px;
background: #F7EC7D;
margin: -100px auto;
position: absolute;
top: 0px;
left: 150px;
}
#top{
height: 60px;
width: 60px;
background: #AA445F;
border: 20px solid #E38F66;
border-radius: 50%;
margin: auto;
position: relative;
top: -50px;
right: 0px;
}
#left{
height: 60px;
width: 60px;
background: #E38F66;
border: 20px solid #AA445F;
border-radius: 50%;
margin: auto;
position: absolute;
top: 80px;
right: 80px;
}
#right{
height: 60px;
width: 60px;
background: #E38F66;
border: 20px solid #AA445F;
border-radius: 50%;
margin: auto;
position: absolute;
top: -20px;
left: 180px;
}
</style>
#11 Eye of Sauron CodeNow
<div id="circle">
<div id="left">
<div id="right">
<div id="inner">
</div>
</div>
</div>
</div>
<style>
body{
background: #191210;
margin: 0;
}
#inner{
height: 50px;
width: 50px;
background: #84271C;
border-radius: 50%;
position: absolute;
top: -25px;
right: -95px;
}
#circle{
height: 100px;
width: 100px;
border: 20px solid #ECA03D;
border-radius: 50%;
margin: 80px auto;
}
#left{
height: 30px;
width: 60px;
border: 20px solid #ECA03D;
border-top: 0;
border-radius: 0px 0px 50px 50px;
position: absolute;
top: 150px;
right: 250px;
}
#right{
height: 30px;
width: 60px;
border: 20px solid #ECA03D;
border-top: 0;
border-radius: 0px 0px 50px 50px;
transform: rotate(180deg);
position: absolute;
top: -50px;
left: 180px;
}
</style>
#12 Wiggly Moustache CodeNow
<div id = "a">
<div id = "b">
<div id = "c">
</div>
</div>
</div>
<div id="dot1"></div>
<div id="dot2"></div>
<style>
body{
background: #F5D6B4;
margin: 0;
}
div{
position: relative;
}
#a{
height: 30px;
width: 60px;
border: 20px solid #D86F45;
border-radius: 0px 0px 50px 50px;
border-top: 0px;
position: absolute;
top: 150px;
left: 70px;
}
#b{
height: 30px;
width: 60px;
border: 20px solid #D86F45;
border-radius: 0px 0px 50px 50px;
transform: rotate(180deg);
border-top: 0px;
position: absolute;
top: -50px;
left: 60px;
}
#c{
height: 30px;
width: 60px;
border: 20px solid #D86F45;
border-radius: 0px 0px 50px 50px;
transform: rotate(180deg);
border-top: 0px;
position: absolute;
top: -50px;
left: -100px;
}
#dot1{
height: 20px;
width: 20px;
background: #D86F45;
border-radius: 50%;
position: relative;
top: 140px;
right: -70px;
}
#dot2{
height: 20px;
width: 20px;
background: #D86F45;
border-radius: 50%;
position: absolute;
top: 140px;
right: 70px;
}
</style>
Circle Loop
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<style>
body{
background: #222730;
margin: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%. -50%);
}
span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 7px solid #00FFFF;
}
span:nth-of-type(1){
height: 240px;
width:240px;
}
span:nth-of-type(2){
height: 200px;
width: 200px;
}
span:nth-of-type(3){
height: 160px;
width:160px;
}
span:nth-of-type(4){
height: 120px;
width:120px;
}
span:nth-of-type(5){
height: 80px;
width:80px;
}
span:nth-of-type(6){
height: 40px;
width:40px;
}
</style>