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.
Tag: patterns
SVG Masking Examples — Paths, Gradients, And Patterns
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.
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.
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.