Create Svg with linear interpolation of colors inside a vector graphics triangle - HTML CSS SVG

HTML CSS examples for SVG:Line

  1. HOME
  2. HTML CSS
  3. SVG
  4. Line

Description

Create Svg with linear interpolation of colors inside a vector graphics triangle

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from  ww w  . ja  v a 2 s.  c  om-->
 <body> 
  <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="white" /> 
     <stop offset="100%" stop-color="black" /> 
    </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)" /> 
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="#ff0000" mask="url(#redmask)" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials