Textured Text

Chapter 12 examines in more detail how paint servers are applied to 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 12-1 & Figure 12-1 (striped pattern in various text elements):
  • SVG file
  • screenshot (Firefox)
• Figure 12-2 (striped pattern in text converted to paths):
  • SVG file
  • screenshot
  • SVG file after merging paths from each text element
• Example 12-2 & Figure 12-3 (using viewBox to create an easily scalable pattern):
  • SVG file
  • screenshot
• Example 12-3 & Figures 12-4, 12-5, 12-6 (setting patterns and gradients on <tspan> elements):
  • SVG file
  • screenshot (Firefox, Comic Sans)
  • screenshot (close-up)
  • screenshot (Firefox, Freestyle Script)

Return to the main table of contents.