Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class='static'></div>
  <div class='rot'>
    <div class='guide'></div>
    <div class='guide'></div>
  </div>
</body>
</html>
 
/* http://imgur.com/a/FywLp#5 */
/*
 * consider the small circle to have a radius
 * r = 4em
 * to construct ellipses, the big circle needs
 * to have a radius R = 2*r
 * 
 * the guide lines have length 2*R
 * the resulting ellipses have
 * a = 3*r, b = r
 */
div, *:before, *:after {
  box-sizing: border-box;
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
}
html, body { margin: 0; height: 100%; }
html:before, html:after, body:before, body:after { /* the four ellipses */
  z-index: -1;
  border: solid 1px red;
  content: '';
}
html:before, body:before {
  margin: -12em -4em; /* -a -b */
  width: 8em; /* 2*b */ height: 24em; /* 2*a */
}
html:after, body:after {
  margin: -4em -12em; /* -b -a */
  width: 24em; /* 2*a */ height: 8em; /* 2*b */
}
body:before, body:after { 
  transform: rotate(45deg);
}
.static { /* static big blue circle */
  margin: -8em; /* -R */
  border: solid 1px blue;
  width: 16em; /* 2*R */ height: 16em;
  background: linear-gradient(blue 1px, transparent 1px) 0 100%, linear-gradient(90deg, blue 1px, transparent 1px) 100% 0;
  background-repeat: no-repeat;
  background-size: 100% 50%, 50% 100%;
}
.static:before { /* static small red circle */
  margin: -4em; /* -r */
  border: solid 1px red;
  width: 8em; /* 2*r */ height: 8em;
  content: '';
}
.rot { /* rotating small blue circle */
  margin: -4em; /* -r */
  border: solid 1px blue;
  width: 8em; /* 2*r */ height: 8em;
  /* little circle in the middle 
   * of rotating circle */
  background: radial-gradient(transparent 0.22855em, dimgrey 0.22855em, dimgrey 0.35355em, transparent 0.35355em);
  animation: rot 8s linear infinite;
}
.rot:before, .rot:after {
  margin: -0.5em;
  border: solid 1px;
  width: 1em; height: 1em;
  content: '';
}
.rot:before { left: 0; }
.rot:after { left: 100%; }
.guide {
  margin: -1px -8em;
  width: 16em; height: 2px;
  border-radius: 0;
  background: dimgrey;
}
.guide:first-child {
  transform: rotate(90deg);
}
.guide:before, .guide:after {
  margin: -0.25em;
  border: solid 1px;
  width: 0.5em; height: 0.5em;
  content: '';
}
.guide:before { left: 0; }
.guide:after { left: 100%; }
@keyframes rot {
  from {
    transform: rotate(0deg) translate(4em) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translate(4em) rotate(720deg);
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
thebabydinopro
0viewers