SVG Linear Gradient

by Ben Clayton

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients -->

<svg width="150" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      
      <!-- y axis is top to bottom -->
      <!-- 0,0  red   to    1,1  blue -->
     
     <linearGradient id="Gradient" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="rgb(255,0,0)"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      
  </defs>
 
 <text x="14" y="14" width="100" height="100" >0,0</text>
   <rect x="20" y="20" rx="0" ry="0" width="100" height="100" fill="url(#Gradient)"/>
 <text x="120" y="125" width="100" height="100" >1,1</text>

  
</svg>

<br>
<a target=_blank href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients">Gradients in SVG</a>