Open code, practice, and notes →
Download source with English comments · for reading
SVG · 10 Clips and Masks
Series contents · Technology map
Stage: Styles, Effects, and DOM Input · Editable example · Storage ID: svg-step-10
Goals and learning outcomes
- Explain clip and mask results side by side.
- Check clipping outside the mask region.
Prerequisites
Prerequisite concepts: Bounding box units, User space. Prepare the result files and observation records from Unit 9.
Key concepts and explanations
Clipping
clipPath restricts the visible geometric region. It suits cutting at a boundary.
Mask intensity
mask controls visibility with alpha or luminance. It produces different results from simple clipping when creating soft boundaries.
Practice setup
First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-10.js and index.html in an external practice project. Clip an image with a circular clipPath to create an avatar.
- Put a gradient in a separate mask so the same image gradually fades out.
- Save the output under the input condition Solid white, then run again with White-to-black gradient. Compare the hypothesis, "Visibility gradually decreases with a luminance mask," against the display and logs, and record the actual result and the causes of any differences in day-10-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Mask | Solid white | White-to-black gradient | Visibility gradually decreases with a luminance mask |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Explain clip and mask results side by side.
- Check clipping outside the mask region.
Self-check
- How does changing mask-type change the meaning of black?
- Does making clipPath translucent turn it into a soft mask?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
An editable browser experiment. Measurements vary with the current device and browser.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Gradient Coordinates · Next: Filter Regions and Cost