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

(function(){
  var db = document.body, //shortcut to document.body
    r = 100, //initial radius of the circle
    x = (db.clientWidth - r) / 2, //horizontal center
    y = (window.pageYOffset || (db.parentNode || db).scrollTop) + ((window.innerHeight+r)/2), //offset from page top
    o = 0.0, //angle offset
    w = 0, //width of square
    dl = 150, //number of divs
    ai=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){
        position='absolute'; //absolute positioning
        display='inline-block'; //make it display as a floating square
        color='#'+Math.floor(Math.random()*16777215).toString(16); //16777215 is ffffff in decimal
        transform= "scale("+(Math.random()/5)+")";
      }
      db.appendChild(d);//append the new div to the body
      return d;
    }),
    // statDiv=document.createElement('div'),
    start, //a starting place so that we can adapt motion over time
    raf = window.requestAnimationFrame;
    // statDiv.className="statDiv";
    // statDiv.style.position="absolute";
    // statDiv.style.top=y+r-20+'px'
    // statDiv.style.left=x+r-20+'px'
    // db.appendChild(statDiv);
    (function (t) {
      start=start||t//initialize 'start'
      // statDiv.innerHTML=dl
      divs.forEach(function(d,i){
        var a = ((i + o) * 2)*ai;
        r=20 + (2*Math.abs(Math.sin(i+(t-start)/1000)*45));
        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;
    z-index:100000;
      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;
})();