Smoothing Mesh Gradients


Coons patch mesh gradients suffer from one flaw: the derivative of the color profile can have jumps at patch boundaries. This can lead to visable artifacts like bright lines at patch boundaries and "star" patterns centered at patch corners. These artifacts are enhanced by the effect of Mach Banding

Linear gradients showing Mach Banding.

Various 1d gradient profiles demonstrating Mach Banding. The red line shows the color profile of the left side of the gradient. The right side is the mirror image.

Adobe Illustrator and CorelDraw implement smoothing in their meshes to ensure the derivatives are continuous. I propose that SVG have the option to "auto" smooth colors across patch boundaries.


The proposed method is to use bicubic interpolation for each color component (RGB). The tangent values are limited to maintain monotonic color profiles along patch boundaries and to ensure minima and maxima remain along patch boundaries. For the edge patches the tangents perpindicular to the edge at the edge are determined by requiring the profile to be quadratic. This (appears) to reproduce Illustrator behavior.

Linear gradients showing various smoothing algorithms.

Linear gradient showing various smoothing algorithms. Top to bottom:

  1. No smoothing.
  2. Hermite with tangents flat.
  3. Catmul-Rom smoothing. Double end point.
  4. Catmul-Rom smoothing. Reflect around end point.
  5. Catmul-Rom smoothing. Quadratic end patches.
  6. Catmul-Rom smoothing with tangent limited to prevent overflow.