如何使用类似于Stripe主页的Javascript创建动态网格梯度？

Question

我想创建一个类似于https://stripe.com/en-in主页的背景。它是画布元素中的动态网格梯度。我试图查看源代码，但找不到相关的javascript代码。

我得到的最接近的是这个，但它只使用CSS，不使用Javascript，也不基于网格梯度-

​

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>

​

另外，你认为我将在NextJS中使用它的事实是相关的吗？谢谢。

Answer 1

删除JS库的链接，它基本上将条带的代码作为API公开到插件网格梯度画布中-

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