How to Code SVG Patterns (Part 1)

No video

How to Code SVG Patterns (Part 1)

Рет қаралды 5,734

Күн бұрын

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...

Пікірлер: 14

@saayxee 3 ай бұрын

Good video! Found it interesting, earned a sub.

@MattVisiwig 3 ай бұрын

Thanks!

@living_in__mississauga Ай бұрын

Thank you!

@MattVisiwig 29 күн бұрын

You're welcome

@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:

@GCASTILL0 Жыл бұрын

Well done.

@MattVisiwig Жыл бұрын

Thanks!

@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.