Kevin Hufnagl reverse engineered Stripe’s Website Gradient Effect. Here’s what he found on the JavaScript side of things:
Essentially they are using a minimalistic implementation of WebGL which they called minigl and a Gradient Class which is used to store all of our animation properties and control the animation.
Update 2021.10.17: The original Pen above seems to have been removed, so here’s a restored version for you to check out:
Update 2021.10.25: On https://whatamesh.vercel.app/ you can easily generate your own gradients. Exporting the code is also possible. It uses the same code as the pen in the update above. Only difference is that it loads the Gradient code using ES Modules.
☝️ There’s no need to download your own gradient.js
, as you can serve it directly from the GitHub Gist via GitHack.