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

SVG Patterns — Build More Complex Patterns With Images, Attributes, And Nesting

Patterns for web design elements are usually created with images. While some patterns can be created using CSS alone, most involve images of some kind. Fortunately SVG makes it easy to create simple and more complex patterns that can scale with your design and likely require fewer http requests.

Continue reading

How To Work With SVG Patterns

Patterns are useful design elements. They can provide contrast, create a sense of depth, and add interest to a composition. SVG makes it easy to create and use patterns that are limited only by your imagination.

Continue reading

How Design Patterns And Component Libraries Create Unity And Context

Earlier in the week I offered some thoughts about components, design patterns, and pattern libraries. In that post I shared some things about the house I grew up in and how it was built on the same plan as other houses in the neighborhood. I want to talk a little more about the neighborhood and how it created a context for each of the houses within.

Continue reading