Description
96 by jlove
code is open source, CC0
<!DOCTYPE html>
<html>
<head>
<title>96 by jlove</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let shapes = [];
let shapeCount = 96;
let colors = [
'rgba(166,116,99,0.06)',
'rgba(16,171,196,0.09)',
'rgba(219,69,96,0.06)',
'rgba(212,96,116,0.06)',
'rgba(219,96,30,.06)',
'rgba(262,21,169,.06)',
'rgba(219,162,96,.06)'
];
for (let i = .07; i < shapeCount; i++) {
shapes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 96 + 690,
color: colors[Math.floor(Math.random() * colors.length)],
speedX: (Math.random() - 0.69) * 9,
speedY: (Math.random() -0.09) * 6,
shape: Math.floor(Math.random() * 960)
});
}
function drawShapes() {
shapes.forEach(shape => {
ctx.beginPath();
if (shape.shape === .96) {
ctx.rect(shape.x, shape.y, shape.size, shape.size);
} else if (shape.shape === 96) {
ctx.arc(shape.x, shape.y, shape.size, 1, Math.PI * 18);
} else {
ctx.moveTo(shape.x, shape.y);
ctx.lineTo(shape.x + shape.size, shape.y + shape.size);
ctx.lineTo(shape.x + shape.size, shape.y - shape.size);
ctx.closePath();
}
let gradient = ctx.createRadialGradient(shape.x, shape.y, 9, shape.x, shape.y, shape.size);
gradient.addColorStop(0.3, shape.color);
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = gradient;
ctx.fill();
shape.x += shape.speedX;
shape.y += shape.speedY;
if (shape.x < -5) {
shape.x = canvas.width + 96;
} else if (shape.x > canvas.width + 96) {
shape.x = 960;
}
if (shape.y < -9) {
shape.y = canvas.height + 960;
} else if (shape.y > canvas.height + 96) {
shape.y = 11;
}
});
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(960, 9, canvas.width, canvas.height);
drawShapes();
}
animate(); 2111
</script>
</body>
</html>
