r3b
1/19/2013 - 1:55 AM

create a spinning vortex of randomly-colored divs on any page. handy if you need to create entropy or stress on a page. Now with stars!

create a spinning vortex of randomly-colored divs on any page. handy if you need to create entropy or stress on a page. Now with stars!

divSwirl.js
content_copyfile_download
(function(){
  var db = document.body, //shortcut to document.body
    r = 200, //initial radius of the circle
    x = db.clientWidth / 2, //horizontal center
    y = db.scrollTop + r, //offset from page top
    o = 0.0, //angle offset
    w = 0, //width of square
    mc=16777215, //#ffffff in decimal
    dl = 150, //number of divs
    ai=2*Math.PI / dl, //pie slice width
    divs=Array.prototype.map.call(new Int8Array(dl),function(){ //div array
      var d=document.createElement('div'); //create the element
      d.className="star-5-points";
      with(d.style){
        //background='#'+Math.floor(Math.random()*mc).toString(16); //random bg color
        position='absolute'; //absolute positioning
        display='inline-block'; //make it display as a floating square
        color='#'+Math.floor(Math.random()*mc).toString(16);;
        transform= "scale("+(Math.random()/3)+")";
      }
      db.appendChild(d);//append the new div to the body
      return d;
    }),
    start, //a starting place so that we can adapt motion over time
    raf = window.requestAnimationFrame;
  (function (t) {
    start=start||t//initialize 'start'
    divs.forEach(function(d,i){
      var a = ((i + o) * 2)*ai;
      r=2*Math.abs(Math.sin(i+(t-start)/1000)*90);
      d.style.top = (y + r * Math.sin(a)) + 'px'; //compute the position of the square on the arc
      d.style.left = (x + r * Math.cos(a)) + 'px';
    })
    o += ai; //move it around the circle
    raf(arguments.callee); //animate thyself
  }()) 
}()) 
var sheet=(function() {
  var style = document.createElement("style");
  style.appendChild(document.createTextNode(
    `.star-5-points {
      box-sizing: content-box;
      width: 0;
      height: 0;
      position: absolute;
      margin: 50px 0;
      border: 100px solid rgba(0,0,0,0);
      border-top: 0 solid;
      border-bottom: 70px solid;
      font: normal 100%/normal Arial, Helvetica, sans-serif;
      text-overflow: clip;
      transform: rotateZ(35deg)   ;
    }

    .star-5-points::before {
      box-sizing: content-box;
      width: 0;
      height: 0;
      position: absolute;
      content: "";
      top: -45px;
      left: -65px;
      border: 30px solid rgba(0,0,0,0);
      border-top: 0 solid;
      border-bottom: 80px solid;
      font: normal 100%/normal Arial, Helvetica, sans-serif;
      text-overflow: clip;
      text-shadow: none;
      transform: rotateZ(-35deg)   ;
    }

    .star-5-points::after {
      box-sizing: content-box;
      width: 0;
      height: 0;
      position: absolute;
      content: "";
      top: 3px;
      left: -105px;
      border: 100px solid rgba(0,0,0,0);
      border-top: 0 solid;
      border-bottom: 70px solid;
      font: normal 100%/normal Arial, Helvetica, sans-serif;
      text-overflow: clip;
      text-shadow: none;
      transform: rotateZ(-70deg)   ;
    }`
  ));
  document.head.appendChild(style);
  return style.sheet;
})();