JSFiddle - React, Tailwind, and code Playground
HTML
<div id="phasebeam">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
CSS
body{
background: #000;
}
#phasebeam{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#phasebeam canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript
(function($) {
var canvas = $('#phasebeam').children('canvas'),
background = canvas[0],
foreground1 = canvas[1],
foreground2 = canvas[2],
config = {
circle: {
amount: 18,
layer: 3,
color: [157, 97, 207],
alpha: 0.3
},
line: {
amount: 12,
layer: 3,
color: [255, 255, 255],
alpha: 0.3
},
speed: 0.5,
angle: 20
};
if (background.getContext) {
var bctx = background.getContext('2d'),
fctx1 = foreground1.getContext('2d'),
fctx2 = foreground2.getContext('2d'),
M = window.Math,
// Cached Math
degree = config.angle / 360 * M.PI * 2,
circles = [],
lines = [],
wWidth, wHeight, timer;
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
function(callback, element) {
setTimeout(callback, 1000 / 60);
};
cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || clearTimeout;
var setCanvasHeight = function() {
wWidth = $(window).width();
wHeight = $(window).height(),
canvas.each(function() {
this.width = wWidth;
this.height = wHeight;
});
};
var drawCircle = function(x, y, radius, color, alpha) {
var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0);
gradient.addColorStop(0, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')');
...