svg triangle barycentric color interpolation

barycentric.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
  <defs>
    <linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" x2="1" y2="1">
        <stop offset="0%" stop-color="#0000ff"/>   
        <stop offset="100%" stop-color="#00ff00"/>   
    </linearGradient>
    <linearGradient id="fader" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
      <stop offset="0%" stop-color="black" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
    <linearGradient id="red" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </linearGradient>
    <mask id="redmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <path d="M 0.5,0 L 1,1 0,1 Z" fill="url(#fader)" />
    </mask>
  </defs>

  <g>
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)" mask="url(#redmask)"/>
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#red)"/>
  </g>
</svg>