SVG Masking Examples — Text And Image Masks

Last week I showed you some masking examples where the mask was more than a rectangle, including a couple where the mask fill was a gradient or pattern. Perhaps even more interesting, you can add a mask on top of an image or use an image or text as the mask.

Continue reading

SVG Masking Examples — Paths, Gradients, And Patterns

You can use any shape, path, or text to create an SVG mask. You can combine any or all of them as the masking content. You can also create some interesting masks using gradient or pattern fills.

Continue reading

How To Apply SVG Linear Gradients To A Fill Or Stroke

There are three ways to fill or stroke SVG elements. You can use a solid color, a pattern, or a gradient. So far in this series we’ve seen the first two. Now it’s time to talk about the third, gradients.

Continue reading

How To Work With Linear, Radial, And Repeating CSS Gradients

Any time you can replace a bitmapped image with code you should. The code is going to weigh less and be more maintainable. That’s not to say we shouldn’t use bitmapped images, but where appropriate go with the code instead.
Continue reading