<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowing Waves Animation</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="waveCanvas"></canvas>
<script>
const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
// Set canvas size
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// Wave configuration
const waves = [ ];
const numWaves = 25;
// Color palette inspired by the image
const colors = [
{ r: 138, g: 43, b: 226 }, // Blue-violet
{ r: 218, g: 112, b: 214 }, // Orchid
{ r: 255, g: 20, b: 147 }, // Deep pink
{ r: 255, g: 105, b: 180 }, // Hot pink
{ r: 147, g: 112, b: 219 }, // Medium purple
{ r: 0, g: 255, b: 127 }, // Spring green
{ r: 50, g: 205, b: 50 }, // Lime green
{ r: 255, g: 165, b: 0 }, // Orange
{ r: 255, g: 215, b: 0 }, // Gold
{ r: 65, g: 105, b: 225 }, // Royal blue
{ r: 138, g: 43, b: 226 }, // Blue violet
{ r: 199, g: 21, b: 133 }, // Medium violet red
];
// Initialize waves
for (let i = 0; i < numWaves; i++) {
const colorIndex = Math.floor(Math.random() * colors.length);
const color = colors[colorIndex];
waves.push({
y: (i / numWaves) * canvas.height,
amplitude: 40 + Math.random() * 80,
frequency: 0.002 + Math.random() * 0.004,
phase: Math.random() * Math.PI * 2,
speed: 0.01 + Math.random() * 0.03,
color: color,
opacity: 0.6 + Math.random() * 0.4,
offset: Math.random() * 100,
verticalSpeed: (Math.random() - 0.5) * 0.5
});
}
let time = 0;
function drawWave(wave, index) {
ctx.save();
// Create gradient for the wave
const gradient = ctx.createLinearGradient(0, wave.y - wave.amplitude, 0, wave.y + wave.amplitude);
const color = wave.color;
const alpha = wave.opacity;
gradient.addColorStop(0, `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha * 0.3})`);
gradient.addColorStop(0.5, `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`);
gradient.addColorStop(1, `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha * 0.3})`);
// Draw the wave shape
ctx.beginPath();
ctx.moveTo(0, canvas.height);
for (let x = 0; x <= canvas.width; x += 2) {
const y = wave.y +
Math.sin(x * wave.frequency + wave.phase + time * wave.speed) * wave.amplitude +
Math.sin(x * wave.frequency * 0.5 + wave.offset) * wave.amplitude * 0.3;
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fillStyle = gradient;
ctx.fill();
// Add vertical line texture
ctx.strokeStyle = `rgba(${color.r + 30}, ${color.g + 30}, ${color.b + 30}, ${alpha * 0.3})`;
ctx.lineWidth = 1;
for (let x = 0; x < canvas.width; x += 3) {
const y1 = wave.y +
Math.sin(x * wave.frequency + wave.phase + time * wave.speed) * wave.amplitude +
Math.sin(x * wave.frequency * 0.5 + wave.offset) * wave.amplitude * 0.3;
const y2 = y1 + 50;
ctx.beginPath();
ctx.moveTo(x, y1);
ctx.lineTo(x, y2);
ctx.stroke();
}
// Add outline for depth
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * 0.4})`;
ctx.lineWidth = 2;
ctx.beginPath();
for (let x = 0; x <= canvas.width; x += 2) {
const y = wave.y +
Math.sin(x * wave.frequency + wave.phase + time * wave.speed) * wave.amplitude +
Math.sin(x * wave.frequency * 0.5 + wave.offset) * wave.amplitude * 0.3;
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
ctx.restore();
}
function animate() {
// Clear canvas with slight trail effect
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update and draw waves
waves.forEach((wave, index) => {
// Slowly move waves vertically
wave.y += wave.verticalSpeed;
// Wrap waves around
if (wave.y < -100) wave.y = canvas.height + 100;
if (wave.y > canvas.height + 100) wave.y = -100;
drawWave(wave, index);
});
time += 0.5;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>