Hello friends. 💜
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...
💡 SVG tip
The <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!
🎨 Article
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.
Read 'How to Use SVG Patterns'
✨ Fun demos
🐰 Easter Bunny SVG pattern 🐰 -- view demo
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
Memphis Pattern -- view demo
Cassie got inspired by all the cool demos and experimented with some generative SVG for this jazzy 80's codepen.
Largely influenced by George's adventures in the last viewBox!
Neon Hexagons Pattern -- view demo
The inimitable Amelia Bellamy-Royds combines stroke animation, filters and patterns in this pen. Seriously cool stuff.
If you've just joined us, you can learn all about filters and stroke animation in our previous viewBox editions!
Why make sense -- view demo
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.