addGradientSteps.js

const easeInOutSine = t => -0.5 * (Math.cos(Math.PI * t) - 1);

export const addGradientSteps = ( 
        // the gradient to add the steps to
        gradient, 
        
        // the color of the gradient (in rgb) and target alpha value
        color = [0, 0, 0], alpha = 1, 
        
        // the ease function to use and the amount of steps to render (higher is more precision)
        easeFn = easeInOutSine, steps = 10, 
        
        // the stop offset of the gradient, where does it start
        offset = 0
    ) => {
    
    const range = 1 - offset;
    const rgb = color.join(',');
    
    for (let i = 0; i <= steps; i++) {
        // get current linear progress between 0 and 1
        const p = i / steps;
        
        // calculate the position of the stop based on current progress and offset
        const stop = offset + range * p;
        
        // add the color stop to the gradient, the alpha is calculated based on the easing function and the target alpha
        gradient.addColorStop(stop, `rgba(${rgb}, ${easeFn(p) * alpha})`);
    }
};