We’re delving into the wonderful world of patterns for this month’s edition.
There’s something super soothing about repeating patterns and we all deserve a little moment of calm right now.
So sit back, chill out and enjoy the eye candy…
<pattern> element can be used to fill SVG elements with repeating shapes.
It can be a little confusing at first as the pattern element has it’s own coordinate system, but patterns are mega fun to experiment with.
You can also use other fill types within a pattern fill, which is pretty inception-y.
Here’s an example of using a gradient fill within a pattern!
This is a great article by Joni Trythall.
She covers everything from creating patterns to nested patterns and manages to explain pattern units in a really accessible way. It’s an old article, but the content still holds up today! SVG doesn’t change a lot.
This hand coded easter bunny pattern from Trud Antzée is seriously cute.
They make some beautiful data-vis too! Check out their etsy shop
Cassie got inspired by all the cool demos and experimented with some generative SVG for this jazzy 80’s codepen.
The inimitable Amelia Bellamy-Royds combines stroke animation, filters and patterns in this pen. Seriously cool stuff.
This is such a gem. I was so happy to stumble across it. Ben Pyrik has recreated the cover of “Why Make Sense?” by Hot Chip.
The Moiré pattern animates too. Love it!
☕ If you’re enjoying this newsletter, you can buy us a coffee or contribute towards our newsletter costs here.