Test it here: https://tkalmi.github.io/mesh-gradient-generator/

Check out the related blog post here: https://tkalmi.dev/blog/mesh-gradient-generator

This code doesn't have any practical purpose; it's just art and for fun.

To change the shapes drawn on canvas:

Drag the control points around to make interesting shapes and curves. You can also click control points at patch corners to change their colors. You can make further changes with the control panel.

Here's a video demoing all the features:

You will need Node.js, its package manager npm, and a web browser.

Tested that it works on the following setup:

• Node.js 22.8.0
• npm 10.8.2
• Chrome 131.0.6778.205
• MacBook Pro 13-inch 2019
  • Processor: 2,8 GHz Quad-Core Intel Core i7
  • Graphics: Intel Iris Plus Graphics 655 1536 MB
  • RAM: 16 GB 2133 MHz LPDDR3
  • macOS Sequoia 15.3.2

To run:

1. On the command line, run npm install to install dependencies
2. Run npm run dev to open the dev server
3. Open the localhost port indicated by the dev server in a browser