From the course: Learning SVG
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Tiled patterns
- [Instructor] A third SVG object you can place in the defs element for later use is the pattern. The pattern is quite literally an SVG pattern, you can tile and fill some strokes, just like you can tile background images using CSS in regular HTML elements. To create a pattern, set up a pattern element, inside a defs element, then define the width and height of the pattern. So, this is the width and height of the element that you want to repeat over and over again, inside the pattern. And, set the pattern units value to userSpaceOnUse. This last setting relates the coordinate values of the pattern to the coordinate values of the overall SVG, and you get this nice tiling effect. Then, it's just a matter of drawing out the SVG shapes, you want to appear in the pattern, the way you normally create an SVG. In the exercise files for this movie, I've set up a basic pattern that shows a square rotated to 45 degrees around its center, and we'll create this nice tile diamond type pattern…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.