SVG Clipping Paths

Last year I published several series (25 posts in total) on the subject of SVG. First was a series on the basics of creating SVG shapes, lines, and curves and adding fill colors and strokes to them. I followed that series with another with more intermediate topics such as reusing SVG code and using patterns and gradients to fill SVG graphics. I closed the year with a series on SVG Text.

Continue reading

CSS Clipping and Masking: Examples and Observations

On Monday I walked through the spec for css clipping and masking. Since the post grew a little long, I promised some examples for today. I’ll also offer a few observations at the end of the post.

Continue reading

CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code

If you’ve done any work with a graphics editor, you likely know what clipping and masking are. Both hide parts of elements visually. Clipping defines which part of an element to show and which to hide, while masking combines two elements to determine how much of each pixel should be transparent.

Continue reading