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>
  <img src='http://i.imgur.com/awEIRSE.gif'>
  <div class='grower'></div>
  <div class='square'></div>
  <div class='base'></div>
</body>
</html>
 
img { width: 37em }
div, div:before, div:after {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  font: 1em arial;
}
/*
 * start from picking a radius for the 
 * arcs at the bottom
 * 5em in this case
 *
 * at any point,
 * the sides of the square are tangent
 * to the arcs
 *
 * this means that, 
 * at the lowest point 
 * (where arcs touch), 
 * one side is tangent to one arc 
 * AND 
 * the next side is tangent to 
 * the next arc
 *
 * this means that the angle 
 * between the two tangents is 90deg
 * 
 * and that the angle of each arc 
 * is also 90 deg
 * 
 * this means that the length of the 
 * segment between 2 arc intersections 
 * (between 2 consecutive lowest points) 
 * is s = radius*sqrt(2) = 5em*sqrt(2)
 *
 * set a size for the 'o' and the 'x' 
 * call it d = .5em
 *
 * the start width for the grower is 
 * d and the end one is 4*s
 * height is always d
 */
.grower {
  margin: -0.25em -14.39214em;
  padding: 0 0.5em;
  width: 0.5em;
  height: 0.5em;
  background: linear-gradient(45deg, transparent 0.3198em, #000000 0.3198em, #000000 0.3873em, transparent 0.3873em) no-repeat 100% 0, linear-gradient(-45deg, transparent 0.3198em, #000000 0.3198em, #000000 0.3873em, transparent 0.3873em) no-repeat 100% 0, radial-gradient(transparent 50%, #000000 50%, #000000 71%, transparent 71%) no-repeat, linear-gradient(90deg, #696969 0.25em, transparent 0.25em) repeat-x 0 50% content-box;
  background-size: 0.5em 0.5em, 0.5em 0.5em, 0.5em 0.5em, 0.5em 1px;
  animation: grow 8s linear infinite;
}
.square {
  /*
   * -l/2 margin-top
   * -(4*s + l)/2 margin-left
   */
  margin: -3.76991em -17.91205em;
  border: solid 1px red;
  /* 
   * the length of the side of 
   * the square is equal to 
   * the length of an arc 
   * 
   * the length of an entire circle
   * would be 2*pi*radius
   * 
   * this is an arc of 90deg, 
   * so a quarter of a circle
   * this means that 
   * the length of an arc 
   * (& length of a side of the square) 
   * is l = pi*radius/2
   */
  width: 7.53982em;
  height: 7.53982em;
  animation: transform 8s linear infinite;
}
.base {
  /* margin:
   * half the length of the square 
   * from the top, 
   * minus half the width 
   * from the left 
  */
  margin: 3.83741em -17.67767em;
  /* 5 arcs, so the width is 5*s */
  width: 35.35534em;
  /* radius*(1 - 1/sqrt(2)) */
  height: 1.61091em;
  /* 4.9325em = 5em - 1px */
  background: radial-gradient(circle at 50% 50%, transparent 4.9325em, #000000 4.9325em, #000000 5em, transparent 5em);
  /* background-size: s 2*radius; */
  background-size: 7.07107em 10em;
}
@keyframes transform {
  to {
    /* translate by 4*s */
    transform: translate(28.28427em) rotate(360deg);
  }
}
@keyframes grow {
  to {
    /* grow to 4s + d */
    width: 28.78427em;
  }
}
Output

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

Dismiss x
public
Bin info
thebabydinopro
0viewers