How to create a dynamic mesh gradient using Javascript similar to Stripe homepage?

Question

I want to create a background similar to https://stripe.com/en-in homepage. It is a dynamic mesh gradient in a Canvas element. I tried to look into the source code but can't find relevant javascript code.

The closest I have gotten is this, but it uses CSS only no Javascript and isn't based on mesh gradient -

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

<h1 class="text-light">Pure CSS Animated Gradient Background</h1>

Also, do you think the fact that I will be using it in SSR in NextJS is relevant here? Thanks.

Answer 1

Dropping the link to JS Library which is basically exposing the stripe's code as API to plugin mesh gradient canvas dynamically -

https://github.com/anup-a/mesh-gradient.js