Sverhnovaya
CSS
head, body{
width:5%;
height:50%;
overflow: hidden;
top:0;
left:0;
margin:0;
padding:0;
background: #05071E;
}
JavaScript
(function(global) {
(function() {
if (global.requestAnimationFrame) {
return;
}
if (global.webkitRequestAnimationFrame) {
global.requestAnimationFrame = global['webkitRequestAnimationFrame'];
global.cancelAnimationFrame = global['webkitCancelAnimationFrame'] || global['webkitCancelRequestAnimationFrame'];
}
var lastTime = 0;
global.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = global.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
global.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
})();
if (typeof define === 'function') {
define(function() {
return global.requestAnimationFrame;
});
}
})(window);
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var PI = Math.PI;
var HPI = PI / 2;
var PI2 = PI * 2;
var RAD = PI / 180;
window.onresize = function() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
};
var Point = function(x, y) {
this.x = x || 0;
this.y = y || 0;
this.angle = 0;
this.radius = 0;
this.radiusAngle = 0;
this.radiusSpeed = 0;
};
var Circle = function(count, normalLength, radiusIn, radiusOut, color, fill, glow) {
count = count % 1 == 0 ? count : (count + 1);
this.count = count;
this.normalLength = normalLength;
this.radiusIn = radiusIn;
this.radiusOut = radiusOut;
this.color = color;
this.fill = fill;
this.glow = glow;
this.angleSpeed = (Math.random() - .5) * RAD * .1;
this.points = [];
this.init();
};
Circle.prototype = {
init: function() {
var step = PI2 / this.count;
var angle = Math.random() * PI2;
...