The Circle

by David Joseph Guzsik

HTML

<h1>Watch this circle as it<br>speeds up exponentially</h1>
<div id="circle"></div>

CSS

body {width:600px;height:600px;font-weight:normal;font-family:serif;text-align:center}
#circle {
  width: 350px;
  height: 350px;
  border: 10px solid black;
  margin:0 auto;
  border-radius: 49.6%;
  animation: woosh 15s;
  animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}

@keyframes woosh {
  0% {
    border-color: black;
    transform: rotateZ(0deg);
  }
  75% {
    border-color: #920;
  }
  100% {
    border-color: #a00;
    transform: rotateZ(60000deg);
  }
}

JavaScript

setTimeout(function(){document.body.innerHtml='';document.body.style.backgroundColor='#000'},15000)