javascript - 如何使用类似于 Stripe 主页的 Javascript 创建动态网格渐变？

Question

我想创建一个类似于https://stripe.com/en-in主页的背景。它是 Canvas 元素中的动态网格渐变。我试图查看源代码，但找不到相关的 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 的 SSR 中使用它的事实与这里有关吗？谢谢。

标签： javascripthtmlcssgradientcss-gradients