Patterns

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, take a bit of time to review the relevant material in the SVG Primer and I will encourage you to try to replicate the first example from that section as shown 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" >
<g id="ovals3" transform="scale(4)" >
<ellipse cx="19" cy="9" rx="5" ry="2" fill="#835"/>
<ellipse cx="11" cy="3" rx="5" ry="2" fill="#358"/>
<ellipse cx="6" cy="13" rx="5" ry="2" fill="#583"/>
</g>
</pattern>
<ellipse fill="url(#OvalPattern)" stroke="black"
stroke-width="2" cx="50%" cy="50%" rx="30%" ry="25%"/>
Ellipse with pattern based on example in SVG Primer
Example of <pattern> from SVG Primer: simplified code and (improved?) appearance. I put a stroke around the shape to make the ellipse clearer, gave each of the ellipses its own color and magnified the pattern through scaling.

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">
<ellipse cx="36.5%" cy="32%" rx="12%" ry="18%"/>
</clipPath>
<image y="0" x="10%" width="55%" height="65%"
xlink:href='p17.jpg' clip-path="url(#CP)"/>
face clipped to ellipse
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" >
<g id="ovals3" transform="scale(4)" >
<ellipse cx="19" cy="9" rx="5" ry="2" fill="#835"/>
<ellipse cx="11" cy="3" rx="5" ry="2" fill="#358"/>
<ellipse cx="6" cy="13" rx="5" ry="2" fill="#583"/>
</g>
</pattern>

<clipPath id="CP">
<ellipse cx="36.5%" cy="32%" rx="12%" ry="18%"/>
</clipPath>
<image y="0" x="10%" width="55%" height="65%"
xlink:href='p17.jpg' clip-path="url(#CP)"/>

<ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="url(#OvalPattern)"/>
clipped face with pattern above
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">
<ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="url(#OvalPattern)"/>
</clipPath>
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" >
<g id="ovals3" transform="scale(4)" fill="white">
<ellipse cx="20" cy="10" rx="5" ry="6" />
<ellipse cx="10" cy="4" rx="6" ry="4" />
<ellipse cx="6" cy="12" rx="5" ry="4" />
</g>
</pattern>
<ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="none"
stroke="#d88" stroke-width="5"/>
<mask id="CP">
<ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="url(#OvalPattern)"/>
</mask>
<image y="0" x="10%" width="55%" height="65%"
xlink:href='p17.jpg' mask="url(#CP)"/>
face clipped and viewed through holes

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 perusual and analysis! One of them takes something much like the last example but then lets the ovals move about using SMIL animation.