In one
of the last examples pertaining to clip-paths and masks, we
tried to view an image through a series of "holes" aligned in a grid.
Rather than building such content manually or even with judicious
application of the <use> tag, there is another way of
producing "repeating" content: the <pattern> tag.
Before we undertake such an exercise, let's take a look at Patterns, as
shown in the SVG
Primer:
Like a gradient, a pattern defines a fill method that may be applied to a given shape. In the case of a pattern though, we may specify some graphics that fill a given rectangle within a pattern, and then allow the pattern to replicate across the region being filled. An example should make it fairly clear.
We define three identical ellipses in close proximity to one another:
<g id="ovals3" fill="#835"
stroke-width=".7" stroke="#006">
<ellipse cx="16" cy="8" rx="4" ry="2"/>
<ellipse cx="8" cy="3" rx="4" ry="2"/>
<ellipse cx="5" cy="11" rx="4" ry="2"/>
</g>
Note that these ellipses all fit inside the rectangle (0,0) to (22,15) without any of the ellipses extending past the edges. Now, we will build a pattern-space: a rectangle of size 22 by 15, in which the three ovals are placed. (We use the patternUnits attribute to make sure the coordinates of the pattern conform to the absolute viewing window rather than to fractions of the object being filled.)
We then define a region (in this case another ellipse) and let the pattern called "Oval" be used to fill it.
<ellipse fill="url(#Oval)" cx="50%" cy="50%" rx="20%" ry="14%"/>
Now we put it all together:
| The pattern itself (scale x 6): |  |
|---|---|
<g id="ovals3" fill="#835" stroke-width=".7" stroke="#006">
|
|
| Applied to a region | |
<defs>
|
|
 |
|
| This example may be seen at http://srufaculty.sru.edu/david.dailey/svg/newstuff/pattern1d.svg | |
In the above example, note that another ellipse (the blue one) has been placed under the pattern just to help see how the pattern, when not completely filled, is actually transparent.
Next, I will encourage you to try to replicate this first example, as shown above, or below, or here. Next, try to "play" with the spacing (the width and height of the pattern tag as well as the number, size, and placement of ellipses) to see if you can design a pattern which is not so obviously a pattern to the eye. How about sharing any designs you can discover which tessellate nicely, but which are not so obvious in their repetition, with the group through the discussion forums? Likewise, if you find any articles that discuss the art and science of hiding the repetition of repeating patterns from obvious detection by the human observer, please share that as well, since the topic of tessellations is one that is rather important in art and architecture (and it intrigues me)!
|
<pattern
id="OvalPattern" patternUnits="userSpaceOnUse" width="100"
height="70"> |
 |
See if you can use either the above code or that in the primer to make something like this and then to improve on it!
Here's one more example by way of illustration. Let's use a series of shapes inside a pattern to clip parts out of an image which itself has been clipped down to an ellipse.| Step 1:
Let us begin with the first example from the lesson on clip-paths, only
expand its size a bit (to prepare for putting patterns inside it):
<clipPath
id="CP"> |
 |
| Step 2:
Now let's make another ellipse (placing the code just below that of
the< image> applying our pattern from above to the new
ellipse:
<pattern
id="OvalPattern" patternunits="userSpaceOnUse">width="100"
height="70" > |
 |
| Step 3:
What we might be interested in doing is to take the ellipse filled with
the pattern and move it inside the <clipPath) as follows:
<clipPath
id="CP"> However, a quick check shows that doesn't work! The reason is that a clip-path cannot contain such complex content. The things inside a clip-path are really just the outlines of the shapes. The fills are ignored! |
|
| Step 4:So
what we do instead is to use a mask instead of a clip-path. Doing that,
should result in a series of holes through which we can see the
underlying face, but you'll note that the face will appear quite dim.
That's because of the way a mask works. We will need to change all the
colors from dark blues, purples and greens to white! I also add another
ellipse behind the other, so that a stroke will be visible around the
ellipse. Once that is done, the placement and size of the ellipses is
manipulated a bit to make the result a bit more interesting.
<pattern
id="OvalPattern" patternUnits="userSpaceOnUse" width="100"
height="70"> |
 |
To extend these ideas a bit, here are a couple of examples (example1, example2) of more complex uses of pattern (in conjunction with animation) for your perusal and analysis! One of them takes something much like the last example but then lets the ovals move about using SMIL animation.
