svg gradient

from Red Blob Games

OpenGL supports three-color gradients. There’s a classic triangle drawn with red, green, blue corners, and then within the triangle there’s a smooth gradient. SVG unfortunately does not support three-color gradients. It only has two-color gradients. But someone on on stackoverflow suggested that gradients can work on masks too. With two two-color gradients together, can we make the classic OpenGL three-color triangle?

The first gradient is bottom to top alpha and the second gradient is left to right color. I put blue underneath the red-green triangle. It works!

<svg viewBox="0 0 100 100">
  <linearGradient id="bottom-to-top-mask" y2="1" x2="0">
    <stop offset="0" stop-color="white" stop-opacity="0.0"/>
    <stop offset="0.7" stop-color="white" stop-opacity="1.0"/>
  <mask id="fade" maskContentUnits="objectBoundingBox">
    <rect width="1" height="1" fill="url(#bottom-to-top-mask)"/>
  <linearGradient id="left-to-right-color" y2="0">
    <stop offset="0.1" stop-color="hsl(120,50%,50%)"/>
    <stop offset="0.9" stop-color="hsl(0,50%,50%)"/>
  <path d="M 50,0 L 100,100 L 0,100 Z"
  <path d="M 50,0 L 100,100 L 0,100 Z"

This may not be practical but it was fun to try.

Email me at , or tweet to @redblobgames, or post a public comment: