Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="eng">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"/>
    <title>Ingress icon</title>
    <link type="text/css" rel="stylesheet" href="ingress-style.css" />
</head>
<body>
<div class="container" id="common_container">
    <div class="half-circle"></div>
    <div class="top-frame"></div>
    <div class="side-frame"></div>
    <div class="botton-frame"></div>
    <div class="central-head"></div>
    <div class="circle"></div>
    <div class="head-line"></div>
    <div class="diagonal-left"></div>
    <div class="diagonal-right"></div>
    <div class="central-line"></div>
    <div class="horiz-tip"></div>
    <div class="vertic-tip"></div>
​
</div>
<script type="text/javascript">
    var container = document.getElementById('common_container');
    var deg = 0;
    setInterval(function(){
        deg = deg < 360 ? deg + 2 : 0;
        container.style.transform = 'rotate3d(0,1,0,'+deg+'deg)';
    }, 30);
    
</script>
</body>
</html>
 
* {
    box-sizing: border-box;
}
body {
    background: black;  
}
.container,
.half-circle,
.top-frame,
.side-frame,
.botton-frame,
.central-head,
.circle,
.head-line,
.diagonal-left,
.diagonal-right, 
.central-line,
.horiz-tip,
.vertic-tip {
    position: absolute; 
}
.container {
    width: 450px;
    height: 600px;
    margin: 40px auto 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;   
    overflow: hidden;
}
.container:after, 
.container:before {
        content: '';
        display: table; 
}
.container:after {
    clear: both;
}
.half-circle {
    top: 25px;
    left: 199px;
    width: 45px;
    height: 30px;
    border-radius: 90px 90px 0 0;
    background: black;
    z-index: 1;
}
.top-frame {
    top: 30px;
    left: 47px;
    background: #0c92d9;
    width: 346px;
    height: 25px;
}
.side-frame {
    top: 30px;
    left: 47px;
    background: #0c92d9;
    width: 25px;
    height: 380px;
}
.side-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 321px;
    background: #0c92d9;
    width: 25px;
    height: 380px;
}
.botton-frame {
    top: 362px;
    left: 128px;
    background: #0c92d9;
    width: 35px;
    height: 243px;
    transform: rotate(-45deg);
}
.botton-frame::after {
    content: '';
    position: absolute;
    top: 105px;
    left: 105px;
    background: #0c92d9;
    width: 35px;
    height: 243px;
    transform: rotate(90deg);
}
.central-head {
    width: 240px;
    height: 35px;
    top: 80px;
    left: 97px;
    background: #0c92d9;
}
.circle {
    width: 65px;
    height: 70px;
    background: black;
    border-radius: 50%;
    top: 65px;
    left: 190px;
    border: 15px solid #0c92d9;
}
.head-line {
    width: 25px;
    height: 58px;
    top: 80px;
    left: 97px;
    background: #0c92d9;    
}
.head-line::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 58px;
    top: 0;
    left: 220px;
    background: #0c92d9;    
}
.diagonal-left {
    width: 25px;
    height: 160px;
    background: #0c92d9;
    top: 106px;
    left: 150px;
    transform: rotate(-45deg);
}
​
.diagonal-right {
    width: 25px;
    height: 160px;
    background: #0c92d9;
    top: 106px;
    left: 265px;
    transform: rotate(45deg);
}
.central-line {
    width: 50px;
    height: 270px;
    background: #0c92d9;
    top: 216px;
    left: 195px;
}
.central-line::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 25px;
    top: 30px;
    left: -15px;
    background: #0c92d9;    
}
.central-line::after {
    content: '';
    position: absolute;
    width: 27px;
    height: 11px;
    top: 270px;
    left: 12px;
    background: #0c92d9;
}
.horiz-tip {
    width: 29px;
    height: 60px;
    background: #0c92d9;
    top: 386px;
    left: 166px;    
}
.horiz-tip::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -47px;
    width: 0;
    height: 0;
    border-top: 60px solid #0c92d9; 
    border-left: 60px solid transparent;    
}
.horiz-tip::after {
    content: '';
    position: absolute;
    top: 0px;
    left: -47px;
    width: 50px;
    height: 15px;
    background: #0c92d9;        
}
.vertic-tip {
    width: 37px;
    height: 55px;
    background: #0c92d9;
    top: 339px;
    left: 119px;
}
.vertic-tip::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 60px;
    height: 25px;
    background: #0c92d9;
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers