Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

120
Views
How to make background animation wave with JavaScript?

I want to make a background animation wave like this website hero section. https://raze.network/

Could anyone help me to make this animation background wave?

Thank you :)

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

There is a great example on codepen that you can use to get a general idea on how to animate this wave using JavaScript. The author allows commenting on CodePen so I would get in touch with him.


let noise = new SimplexNoise();

function draw(e) {
    let xCount = 35;
    let yCount = 80;
    let iXCount = 1 / (xCount - 1);
    let iYCount = 1 / (yCount - 1);
    let time = e * 0.001;
    let timeStep = 0.01;
    let grad = ctx.createLinearGradient(-width, 0, width, height);
    let t = time % 1;
    let tSide = floor(time % 2) === 0;
    let hueA = tSide ? 340 : 210;
    let hueB = !tSide ? 340 : 210;
    let colorA = hsl(hueA, 100, 50);
    let colorB = hsl(hueB, 100, 50);
    grad.addColorStop(map(t, 0, 1, THIRD, ZERO), colorA);
    grad.addColorStop(map(t, 0, 1, TWO_THIRDS, THIRD), colorB);
    grad.addColorStop(map(t, 0, 1, ONE, TWO_THIRDS), colorA);
    ctx.globalAlpha = map(cos(time), -1, 1, 0.15, 0.3);
    background(grad);
    ctx.globalAlpha = 1;
    beginPath();
    for(let j = 0; j < yCount; j++) {
        let tj = j * iYCount;
        let c = cos(tj * TAU + time) * 0.1;
        for(let i = 0; i < xCount; i++) {
            let t = i * iXCount;
            let n = noise.noise3D(t, time, c);
            let y = n * height_half;
            let x = t * (width + 20) - width_half - 10;
            (i ? lineTo : moveTo)(x, y);
        }
        time += timeStep;
    }
    compositeOperation(compOper.lighter);
    ctx.filter = 'blur(10px)';
    stroke(grad, 5);
    ctx.filter = 'blur(5px)';
    stroke(hsl(0, 0, 100, 0.8), 2);
}

https://codepen.io/Alca/pen/gzxXLq

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!