You can use the following code to have a beautiful background on dark themed websites. In this code the vertical lines move slowly together and each has a crystalline appearance. Clicking on the color theme page changes these lines, which makes this background more attractive.
HTML
<!-- This script got from www.devanswer.com -->
<div id="fps"></div>
<div id="info">
Click on the Canvas for new Colors :)
</div>
<div id="bg_glow"></div>
<div id="overlay"></div>
<canvas id="canvas"></canvas><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html, body {
overflow: hidden;
background: #000;
padding: 0px;
margin: 0px;
}
#canvas {
cursor: crosshair;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#overlay {
background: radial-gradient(ellipse at center, rgba(0,0,0,.0) 10%, rgba(0,0,0,.8) 80%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
z-index: 3;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#bg_glow {
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#info {
z-index: 4;
position: absolute;
color: #fff;
top: 0px;
left: 0px;
background: rgba(60,60,60,.6);
padding: 5px;
}
#overlay:hover {
cursor: pointer;
}
#fps {
position: absolute;
top: 0px;
right: 0px;
z-index: 5;
}Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bgg = document.getElementById("bg_glow");
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;
window.onresize = function () {
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;
maxHeight = h * .9
minHeight = h * .5;
dots = [];
pushDots();
ctx.globalCompositeOperation = "lighter";
};
document.getElementById("overlay").onclick = function () {
hue = Math.random() * 360;
bgg.style.background = "radial-gradient(ellipse at center, hsla(" + hue + ",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)";
dots = [];
pushDots();
}
dots = [{}];
mx = 0; my = 0;
md = 100;
maxWidth = 15;
minWidth = 2;
maxHeight = h * .9
minHeight = h * .5;
maxSpeed = 35;
minSpeed = 6;
hue = 230;
hueDif = 50; // Hue +/-
glow = 10; // Set to 0 for better performance
ctx.globalCompositeOperation = "lighter";
function pushDots(num) {
for (i = 1; i < md; i++) {
dots.push({
x: Math.random() * w,
y: Math.random() * h / 2,
h: Math.random() * (maxHeight - minHeight) + minHeight,
w: Math.random() * (maxWidth - minWidth) + minWidth,
c: Math.random() * ((hue + hueDif) - (hue - hueDif)) + (hue - hueDif),
m: Math.random() * (maxSpeed - minSpeed) + minSpeed
});
}
} pushDots();
function render() {
ctx.clearRect(0, 0, w, h);
for (i = 1; i < dots.length; i++) {
ctx.beginPath();
grd = ctx.createLinearGradient(dots[i].x, dots[i].y, dots[i].x + dots[i].w, dots[i].y + dots[i].h);
grd.addColorStop(.0, "hsla(" + dots[i].c + ",50%,50%,.0)");
grd.addColorStop(.2, "hsla(" + dots[i].c + 20 + ",50%,50%,.5)");
grd.addColorStop(.5, "hsla(" + dots[i].c + 50 + ",70%,60%,.8)");
grd.addColorStop(.8, "hsla(" + dots[i].c + 80 + ",50%,50%,.5)");
grd.addColorStop(1., "hsla(" + (dots[i].c + 100) + ",50%,50%,.0)");
ctx.shadowBlur = glow;
ctx.shadowColor = "hsla(" + (dots[i].c) + ",50%,50%,1)";
ctx.fillStyle = grd;
ctx.fillRect(dots[i].x, dots[i].y, dots[i].w, dots[i].h);
ctx.closePath();
dots[i].x += dots[i].m / 100;
if (dots[i].x > w + maxWidth) {
dots.splice(i, 1);
dots.push({
x: 0,
y: Math.random() * h,
h: Math.random() * (maxHeight - minHeight) + minHeight,
w: Math.random() * (maxWidth - minWidth) + minWidth,
c: Math.random() * ((hue + hueDif) - (hue - hueDif)) + (hue - hueDif),
m: Math.random() * (maxSpeed - minSpeed) + minSpeed
});
}
} window.requestAnimationFrame(render);
}
bgg.style.background = "radial-gradient(ellipse at center, hsla(" + hue + ",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)";
render();
