RGB-triangle.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600" viewBox="-10 -10 120 120">

<style>
#rgb-triangle { isolation: isolate; }
#rgb-triangle>* { mix-blend-mode: screen; }
</style>

<defs>
    <polygon id="triangle" points="0,0 100,0 50,86.6" stroke="none"/>
    
    <linearGradient id="red" gradientTransform="rotate(90)">
        <stop offset="0%"  stop-color="#000" />
        <stop offset="100%" stop-color="#f00" />
    </linearGradient>

    <linearGradient id="green" gradientTransform="rotate(30)">
        <stop offset="0%"  stop-color="#0f0" />
        <stop offset="100%" stop-color="#000" />
    </linearGradient>

    <linearGradient id="blue" gradientTransform="rotate(-30)">
        <stop offset="0%"  stop-color="#000" />
        <stop offset="100%" stop-color="#00f" />
    </linearGradient>
</defs>

<g id="rgb-triangle" transform="matrix(1 0 0 -1 0 90)">
    <use href="#triangle" fill="url('#green')"/>
    <use href="#triangle" fill="url('#blue')"/>
    <use href="#triangle" fill="url('#red')"/>
</g>

</svg>