Mesh Gradient Generator

This app generates a dynamic mesh gradient using the colours you choose below.

Each gradient is painted at random using HTML Canvas and can be exported/download to various image types.

Choose colours:

How it Works

Mesh Gradient Generator | 2021

The Mesh Gradient Generator uses browser image interpolation and HTML Canvas. We generate a small (10x10 pixel) canvas painted with pseudorandom triangles and then use browser (or canvas for download) interpolation to scale it up. The results are quick to create, unique mesh gradients, generated at random.

Canvas Gradient Generator

First, we need to paint a small canvas based on the colours input and scale this with CSS:

  1. Create a canvas
  2. Obtain the 2d context
  3. Fill the canvas with colour 1
  4. Use pseudorandom numbers between 0 and canvas height/width to draw a triangle
  5. Generate another triangle and paint with colour 3
  6. Blur the canvas slightly
  7. Use CSS to scale the canvas and the browser interpolation will do the rest

To download, we scale the canvas iteratively then export:

  1. Create a download button and hidden download link we will programatically click
  2. Create an in-memory canvas and start scaling up the smaller canvas to the desired size using drawimage()
  3. Export the canvas toDataURL and set as the src of the download link
  4. Call the download link's click() method

Notes:

I tried several canvas sizes and found a 8x8 provided consistent results without compromising on detail, anything smaller didn’t look meshy enough and anything larger could result in broken/dodgy gradients when dynamically painting the canvas.

I found using triangles to paint the canvas was most effective in producing ‘meshy’ gradients without harsh edges or linear appearance.

I also found applying a small blur would help the browser interpolation by starting the blend of any sharp edges in the 8x8 canvas.

The White Stag website is written in StencilJS and UIKit so the example below contains code and classes specific to these libraries, but thes functions can be lifted and editred to work in any stack that supports HTML Canvas.

mesh.function.ts