Painting Lines

Chapter 13 looks at some of the issues that come into play when using paint servers to paint strokes instead of fill regions.

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 13-1 & Figure 13-1 (gradient stroking a rectangle):
- SVG file
- screenshot
Figure 13-2 (repeating gradient stroking a rectangle):
- SVG file
- screenshot
Example 13-2 & Figure 13-3 (gradient strokes on straight lines):
- SVG file
- screenshot
Example 13-3 & Figure 13-4 (user-space gradients paired with straight lines):
- SVG file
- screenshot
Example 13-4 & Figure 13-5 (a single user-space gradient with transformed straight lines):
- SVG file
- screenshot
Example 13-5 & Figure 13-6 (gradient to convey value of a data line):
- SVG file (refresh to generate different data)
- screenshot
Example 13-6 & Figure 13-7 (patterned strokes):
- SVG file
- screenshot