And Repeat

Chapter 8 covers repeating linear gradients and some of the effects you can create with them. It also includes some practical examples and tips on using gradients (and other paint servers) for inline SVG icons in an HTML page.

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 8-1 & Figure 8-1 (padded gradient):
  • SVG file
  • screenshot
• Figure 8-2 (converting the padded gradient to reflect):
  • SVG file
  • screenshot
• Example 8-2 & Figure 8-2 (reflected wave gradient):
  • SVG file
  • screenshot
• Figure 8-4 (converting the padded gradient to repeat):
  • SVG file
  • screenshot
• Example 8-3 & Figure 8-5 (repeated wallpaper gradient):
  • SVG file
  • screenshot
• Example 8-4 & Figure 8-6 (gradient-filled SVG icons in HTML):
  • HTML file
  • screenshot
• Example 8-5 & Figure 8-7 (dynamically inserting gradient-filled SVG star ratings):
  • HTML file
  • screenshot

Return to the main table of contents.