Skip to content
document.addEventListener('DOMContentLoaded', (event) => {
const container = document.getElementById('animate-bg');
const canvas = document.createElement('canvas');
canvas.id = 'wave-canvas';
const ctx = canvas.getContext('2d');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
container.appendChild(canvas);
let waveHeightX = 7;
let waveFrequencyX = 0.01;
let speedX = 0.015; // Speed of wave movement in the X direction
let waveHeightY = 7;
let waveFrequencyY = 0.01;
let speedY = 0.015; // Speed of wave movement in the Y direction
let gridSize = 40; // Distance between grid points
let circleSize = 3; // Diameter of the circles
let offsetX = 0;
let offsetY = 0;
// Control variables for colours
let circleColour = '#333D4B'; // Colour of the circles
let primaryGridColour = '#333D4B'; // Colour of the primary grid lines
let secondaryGridColour = 'rgba(51, 61, 75, 0.5)'; // Colour of the secondary grid lines
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Extend grid to cover visible area plus a bit more to avoid visible edges
let extendedGridSizeX = Math.ceil(canvas.width / gridSize) + 1;
let extendedGridSizeY = Math.ceil(canvas.height / gridSize) + 1;
// Draw horizontal lines following the wave pattern
for (let y = -gridSize; y <= extendedGridSizeY * gridSize; y += gridSize / 2) {
ctx.beginPath();
for (let x = -gridSize; x <= extendedGridSizeX * gridSize; x += 1) { // Increment by 1 for smoother lines
let waveX = Math.sin((y * waveFrequencyY) + offsetY) * waveHeightY;
let waveY = Math.sin((x * waveFrequencyX) + offsetX) * waveHeightX;
let adjustedX = x + waveX;
let adjustedY = y + waveY;
ctx.lineTo(adjustedX, adjustedY);
}
ctx.strokeStyle = y % gridSize == 0 ? primaryGridColour : secondaryGridColour; // Adjust colour based on grid type
ctx.stroke();
}
// Draw vertical lines following the wave pattern
for (let x = -gridSize; x <= extendedGridSizeX * gridSize; x += gridSize / 2) {
ctx.beginPath();
for (let y = -gridSize; y <= extendedGridSizeY * gridSize; y += 1) { // Increment by 1 for smoother lines
let waveX = Math.sin((y * waveFrequencyY) + offsetY) * waveHeightY;
let waveY = Math.sin((x * waveFrequencyX) + offsetX) * waveHeightX;
let adjustedX = x + waveX;
let adjustedY = y + waveY;
ctx.lineTo(adjustedX, adjustedY);
}
ctx.strokeStyle = x % gridSize == 0 ? primaryGridColour : secondaryGridColour; // Adjust colour based on grid type
ctx.stroke();
}
// Draw circles at primary grid intersections
for (let y = 0; y <= extendedGridSizeY * gridSize; y += gridSize) {
for (let x = 0; x <= extendedGridSizeX * gridSize; x += gridSize) {
let waveX = Math.sin((y * waveFrequencyY) + offsetY) * waveHeightY;
let waveY = Math.sin((x * waveFrequencyX) + offsetX) * waveHeightX;
let adjustedX = x + waveX;
let adjustedY = y + waveY;
// Draw circle
ctx.beginPath();
ctx.arc(adjustedX, adjustedY, circleSize / 2, 0, Math.PI * 2);
ctx.fillStyle = circleColour;
ctx.fill();
}
}
// Update wave offsets
offsetX += speedX;
offsetY += speedY;
}
function animate() {
requestAnimationFrame(animate);
draw();
}
animate();
});
