<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |