Geometrical drawing in HTML and CSS - no images

HTML
<div class="container"></div> <div class="container2"></div> <div class="container3"></div> <div class="container4"></div> <div class="star"></div> <div class="star2"></div> <div class="star3"></div> <div class="star4"></div> <div class="star5"></div> <div class="star6"></div> <div class="center"></div> <div class="center2"></div> <div class="center3"></div> <div class="center4"></div> <div class="center5"></div> <div class="center6"></div>
CSS
html,body,div {width:100%;height:100%;} body {background:#2f2933;overflow:hidden;} div { position:absolute; left:0; right:0; top:0; bottom:0; margin-right:auto; margin-left:auto; margin-top:auto; margin-bottom:auto; } .container,.center6 { background-color:#ffffa6; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffa6),color-stop(1, #bdf271)); background-image: -o-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%); background-image: -moz-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%); background-image: -webkit-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%); background-image: -ms-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%); background-image: linear-gradient(to bottom, #ffffa6 0%, #bdf271 100%); } .container2,.center5 { background-color:#bdf271; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bdf271),color-stop(1, #29d9c2)); background-image: -o-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%); background-image: -moz-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%); background-image: -webkit-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%); background-image: -ms-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%); background-image: linear-gradient(to bottom, #bdf271 0%, #29d9c2 100%); -webkit-animation-delay:200ms; -moz-animation-delay:200ms; -o-animation-delay:200ms; animation-delay:200ms; } .container3,.center4 { background-color:#29d9c2; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #29d9c2),color-stop(1, #01a2a6)); background-image: -o-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%); background-image: -moz-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%); background-image: -webkit-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%); background-image: -ms-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%); background-image: linear-gradient(to bottom, #29d9c2 0%, #01a2a6 100%); -webkit-animation-delay:400ms; -moz-animation-delay:400ms; -o-animation-delay:400ms; animation-delay:400ms; } .container4,.center { background-color:#01a2a6; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #01a2a6),color-stop(1, #2f2933)); background-image: -o-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%); background-image: -moz-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%); background-image: -webkit-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%); background-image: -ms-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%); background-image: linear-gradient(to bottom, #01a2a6 0%, #2f2933 100%); -webkit-animation-delay:600ms; -moz-animation-delay:600ms; -o-animation-delay:600ms; animation-delay:600ms; } .container,.container2,.container3,.container4 { -webkit-animation:container 1s infinite linear; -moz-animation:container 1s infinite linear; -o-animation:container 1s infinite linear; animation:container 1s infinite linear; opacity:0.5; } .container{ width:400px; height:400px; border-radius:200px; z-index:6; } .container2 { width:500px; height:500px; border-radius:250px; z-index:5; } .container3 { width:600px; height:600px; border-radius:300px; z-index:4; } .container4 { width:700px; height:700px; border-radius:350px; z-index:3; } .star,.star:after,.star2,.star2:after,.star3,.star3:after,.star4,.star4:after,.star5,.star5:after,.star6,.star6:after { width: 0; height: 0; border-left: 130px solid transparent; border-right: 130px solid transparent; } .star,.star2,.star3,.star4,.star5,.star6 {top:-5%;} .star:after,.star2:after,.star3:after,.star4:after,.star5:after,.star6:after { position: absolute; content: ""; top: 60px; left: -130px; } .star {border-bottom: 250px solid #2f2933;z-index:12;} .star:after {border-top: 250px solid #2f2933;} .star2 { border-bottom: 250px solid #ac0000; z-index:11; -webkit-transform: rotate(-30deg) translateX(-15px) translateY(0px); -moz-transform: rotate(-30deg) translateX(-15px) translateY(0px); -o-transform: rotate(-30deg) translateX(-15px) translateY(0px); transform: rotate(-30deg) translateX(-15px) translateY(0px); } .star2:after {border-top: 250px solid #ac0000;} .star3{ border-bottom: 250px solid #800000; z-index:10; -webkit-transform: rotate(-35deg) translateX(-15px) translateY(0px); -moz-transform: rotate(-35deg) translateX(-15px) translateY(0px); -o-transform: rotate(-35deg) translateX(-15px) translateY(0px); transform: rotate(-35deg) translateX(-15px) translateY(0px); } .star3:after {border-top: 250px solid #800000;} .star4{ border-bottom: 250px solid #660000; z-index:9; -webkit-transform: rotate(-40deg) translateX(-15px) translateY(0px); -moz-transform: rotate(-40deg) translateX(-15px) translateY(0px); -o-transform: rotate(-40deg) translateX(-15px) translateY(0px); transform: rotate(-40deg) translateX(-15px) translateY(0px); } .star4:after {border-top: 250px solid #660000;} .star5{ border-bottom: 250px solid #590000; z-index:8; -webkit-transform: rotate(-45deg) translateX(-15px) translateY(0px); -moz-transform: rotate(-45deg) translateX(-15px) translateY(0px); -o-transform: rotate(-45deg) translateX(-15px) translateY(0px); transform: rotate(-45deg) translateX(-15px) translateY(0px); } .star5:after {border-top: 250px solid #590000;} .star6{ border-bottom: 250px solid #4d0000; z-index:7; -webkit-transform: rotate(-50deg) translateX(-15px) translateY(0px); -moz-transform: rotate(-50deg) translateX(-15px) translateY(0px); -o-transform: rotate(-50deg) translateX(-15px) translateY(0px); transform: rotate(-50deg) translateX(-15px) translateY(0px); } .star6:after {border-top: 250px solid #4d0000;} .center,.center2,.center3,.center4,.center5,.center6 { -webkit-animation:container 1s infinite linear; -moz-animation:container 1s infinite linear; -o-animation:container 1s infinite linear; animation:container 1s infinite linear; opacity:0.5; } .center { width:60px; height:60px; border-radius:30px; z-index:13; } .center2 { width:50px; height:50px; border-radius:25px; background:#2f2933; z-index:14; } .center3 { width:40px; height:40px; border-radius:20px; background:#2f2933; z-index:15; } .center4 { width:30px; height:30px; border-radius:15px; z-index:16; } .center5 { width:20px; height:20px; border-radius:10px; z-index:17; } .center6 { width:10px; height:10px; border-radius:5px; z-index:18; } /*animation container*/ @-webkit-keyframes container { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);} } @-moz-keyframes container { 0% {-moz-transform:rotate(0deg);transform:rotate(0deg);} 100% {-moz-transform:rotate(360deg);transform:rotate(360deg);} } @-o-keyframes container { 0% {-o-transform:rotate(0deg);transform:rotate(0deg);} 100% {-o-transform:rotate(360deg);transform:rotate(360deg);} } @keyframes container { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }
JAVASCRIPT
Expand for more options Login