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!
(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;
})();