Gradients in All Shapes and Sizes

Chapter 7 explores the ways in which you can manipulate a linear gradient to move it within the shape being painted.

The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.

Example 7-1 & Figure 7-1 (corner-to-corner gradient vectors in squares):
- SVG file
- screenshot
Figure 7-2 (corner-to-corner gradient vectors in circles):
- SVG file
- screenshot
Example 7-2 & Figures 7-3, 7-4 (object bounding box gradient with a diagonal stripe):
Figure 7-5 (user-space gradient with a diagonal stripe):
- SVG file
- screenshot in a rectangular window
Example 7-3 & Figure 7-6 (user-space gradient for multiple shapes):
- SVG file
- screenshot
Example 7-4 & Figure 7-7 (CSS corner diagonal gradient versus SVG):
- HTML file
- screenshot
Example 7-5 & Figure 7-8 (skewed gradients and shapes):
- SVG file
- screenshot
Example 7-6 & Figure 7-9 (rotated gradients):
- SVG file
- screenshot
Figure 7-10 (rotated user-space gradients):
- SVG file
- screenshot
Figure 7-11 (rotated gradient comparison):
- SVG file
- screenshot
Example 7-7 & Figure 7-12 (CSS 45°-angle gradient versus corner diagonal gradient):
- HTML file
- screenshot