How to Code SVG Patterns (Part 1)

In this tutorial, we look at the basics of coding an SVG pattern.
Part 1: Alternating pattern (basics)
Part 2: Hexagon pattern (coming soon)
Part 3: Doodle pattern (coming soon)
This series is based on my blog post that takes an in-depth look at creating SVG patterns: svgbackgrounds...

[@jugibur2117]

Thanks Matt for shraing, that was really interesting!

[@MattVisiwig]

Of course, glad you found it interesting!

[@VideoNOLA]

6:55 I feel as though those black circles would have appeared just fine if you'd replaced the pattern rectangle's fill with "none" instead of "white".

[@MattVisiwig]

The fill isn't hiding anything, everything that falls outside the pattern tile doesn't show.
You can try it yourself if you'd like:

[@saayxee]

Good video! Found it interesting, earned a sub.

[@MattVisiwig]

Thanks!

[@living_in__mississauga]

Thank you!

[@MattVisiwig]

You're welcome

[@VideoNOLA]

As with CSS's old 'image-repeat' element, can these Patterns be constrained to repeating only horizontally or vertically?

[@MattVisiwig]

Not to my knowledge. A workaround would be controlling the height or width of the rectangle with the pattern fill. If the pattern height and rectangle height match, that tile would not repeat vertically, recreating the repeat-x value.
The other thing you could do, if you have access to CSS is to use the CSS background-repeat property and remove the pattern element from the SVG.

[@GCASTILL0]

Well done.

[@MattVisiwig]

Thanks!

[@KenoGarage]

How do you get the live preview of the .svg? Is it an extension? If so, which one?

[@MattVisiwig]

It's a VS Code extension called SVG and its by jock.