XML/SVG/linearGradient

Creating Cones with Gradient Shading

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">

<svg width="100%" height="100%">

 <defs>
   <linearGradient id="gradientDefinition1" x1="0" y1="0" x2="200"
     y2="0" gradientUnits="userSpaceOnUse">
     <stop offset="0%" style="stop-color:#FF0000" />
     <stop offset="100%" style="stop-color:#000000" />
   </linearGradient>
 </defs>
 <g transform="translate(50,50)">
   <polygon points="0,50 200,50 100,300"
     style="fill:url(#gradientDefinition1);" />
   <ellipse cx="100" cy="50" rx="100" ry="20" style="fill:blue;" />
 </g>

</svg>

</source>
   
  

Parallelograms as SVG Polygons

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

  <defs>
     <linearGradient id="linearGradient"
        gradientUnits="userSpaceOnUse">
        <stop stop-color="red" offset="0%"/>
        <stop stop-color="black"  offset="100%"/>
     </linearGradient>
  </defs>
  <g transform="translate(50,20)">
    <polygon
       stroke="yellow"
       stroke-width="4"
       stroke-dasharray="8 8 8 8"
       points="50,0 450,0 400,150 0,150"
       fill="url(#linearGradient)"/>
  </g>

</svg>

</source>