I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functioning as expected. I can't figure out what I might be overlooking.
While searching online, I found other websites displaying Codepens with similar outcomes, however, they have acknowledged that whatamesh is more organized. So, despite trying the alternatives they recommended (which also didn't work), I decided to return to whatamesh.
Due to a character limit, I had to provide the link to the Gradient.js file offered by whatamesh.
https://gist.github.com/jordienr/64bcf75f8b08641f205bd6a1a0d4ce1d#gradient-canvas {
width:100%;
height:100%;
--gradient-color-1: #ebebeb;
--gradient-color-2: #ffb5af;
--gradient-color-3: #ebebeb;
--gradient-color-4: #ebebeb;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css"/>
</head>
<body>
<div>
<h1>hello world</h1>
<canvas id="gradient-canvas" data-transition-in></canvas>
</div>
<script src="./Gradient.js">
import { Gradient } from './Gradient.js'
// Create your instance
const gradient = new Gradient()
// Call `initGradient` with the selector to your canvas
gradient.initGradient('#gradient-canvas')
</script>
</body>
</html>