33 lines
1.5 KiB
XML
33 lines
1.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -22.52777 150 150">
|
|
<style>
|
|
/* svg { background: #000; } */
|
|
#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" /> -->
|
|
<polygon id="triangle" points="0,0 65,112.58330 130,0" stroke="none">
|
|
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 65 37.52777" to="-360 65 37.52777" dur="10s" repeatCount="indefinite" />
|
|
</polygon>
|
|
<!-- <polygon id="triangle" points="200,0 26.79492,300 373.20508,300" stroke="none" /> -->
|
|
<!-- <polygon id="triangle" points="0,72 -62.353829,-36 62.353829,-36" 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>
|
