Multi-Stop Radial Gradients

---

Lumination-Like Effects with Multi-Stop Radial Gradients

Consider the ellipse and rectangle in Figure 3.6 that are rendered with radial gradient shading.

Figure 3.6: Lumination effects with radial gradient shading.

The SVG document in Listing 3.6 renders an SVG ellipse element and an SVG rect element that creates a lumination-like effect with radial gradient shading.

Listing 3.6 ripple4RadialGradient6.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg">     <defs>       <radialGradient                        gradientUnits="userSpaceOnUse"                       cx="400" cy="200" r="300"                       fx="400" fy="200">         <stop offset="0"    stop-color="white"/>         <stop offset=".149" stop-color="red"/>         <stop offset=".15"  stop-color="blue"/>         <stop offset="1"    stop-color="black"/>       </radialGradient>       <radialGradient                        gradientUnits="userSpaceOnUse"                       cx="400" cy="200" r="300"                       fx="400" fy="200">         <stop offset="0"    stop-color="yellow"/>         <stop offset=".149" stop-color="red"/>         <stop offset=".15"  stop-color="white"/>         <stop offset="1"    stop-color="black"/>       </radialGradient>     </defs>   <g transform="translate(50,20)">     <ellipse fill="url(#radialGradient1)"              stroke="black" stroke-width="8"              cx="300" cy="100" rx="300" ry="100"/>     <rect    fill="url(#radialGradient2)"              stroke="black" stroke-width="8"              x="0" y="200" width="600" height="300"/>   </g> </svg>

Remarks

Since the code in Listing 3.6 is very similar to that of Listing 3.5, why is there such a different visual effect? The answer lies in the manner in which the radial gradients are specified. In Listing 3.5, the radial gradient is defined as follows:

        <stop offset="0%"   stop-color="yellow"/>         <stop offset="33%"  stop-color="blue"/>         <stop offset="67%"  stop-color="yellow"/>         <stop offset="100%" stop-color="blue"/>

The offset values specified above are more or less uniformly distributed between 0% and 100%. Now look at the radial gradient defined in Listing 3.6 that's given below:

        <stop offset="0"    stop-color="yellow"/>         <stop offset=".149" stop-color="red"/>         <stop offset=".15"  stop-color="white"/>         <stop offset="1"    stop-color="black"/>

As you can see, the offset values are not uniformly distributed between 0% and 100%. This type of gradient might be called (informally) an 'extreme' gradient because the close proximity of consecutive offset values causes very sudden gradient changes.

The SVG code in Listing 3.6 shows you how to create unexpected visual effects when the values of consecutive stop offset terms are very close together. The impression created is of a light shining on an ellipse and a rectangle such that the radial color effect seems to emanate from the a point that is between the rectangle and the ellipse. The interesting aspect of this image is that the radial color effect is from white to black for the rectangle, whereas the radial color effect is from blue to black for the ellipse.

---