Picture-Perfect Patterns

Chapter 11 shows how a pattern can be used to define a single image or graphic that can be used to fill shapes or text.

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 11-1 & Figure 11-1 (layered gradients):
  • SVG file
  • screenshot
• Example 11-2 & Figure 11-2 (circular gradient using preserveAspectRatio on a pattern):
  • SVG file
  • screenshot
• Figure 11-3 (circular gradient as a repeating pattern):
  • SVG file
  • screenshot
• Example 11-3 & Figure 11-4 (clouds backdrop):
  • SVG file
  • screenshot
• Example 11-4 & Figures 10-5, 10-6 (image-filled text):
  • SVG file
  • screenshot
  • source image (see also the image details from NASA)

Return to the main table of contents.