Hello friends! 👋
Each month we’ll be bringing you a bite size tip, an article, some fun demos, and a challenge.
☕ If you’re enjoying this newsletter, you can buy us a coffee or contribute towards our newsletter costs here.
💌 Let’s open up the box and see what’s inside…
In this month’s viewBox we’re going to delve into the magical world of filters.
SVG filters can be used to apply graphical effects to SVG elements, or HTML elements – e.g. images, text or even videos.
You might have come across CSS filters before? SVG Filters are the super-powered, customizable version!
💡 SVG tip
Did you know that you can use any SVG filter to style any HTML element?
Include your SVG filter in your HTML and visually hide from the page.
Now you can refer to your SVG filter in CSS with the CSS filter property:
If you want to learn more about filters, there’s no better place to learn than Sara Soueidan’s series of articles on codrops.
They’re brimming with great demos and in depth explanations of how certain SVG filter primitives work.
Here’s the first article in the 7 part series.
Read SVG filters 101
✨ Fun demos
Yuanchuan’s experiments with SVG and CSS filters are mind-meltingly beautiful. If you’re not already, definitely give them a follow on twitter. Your feed will be better for it.
This demo uses
feDisplacementMap to create a ripple effect.
These incredibly lifelike water droplets were crafted by Oscar Salazar using a combination of CSS and SVG filters.
Even the paper texture is created using filters!
SVG Filters playground – view it live
If you are unfamiliar with SVG filters, this tool made by Yoksel is a good way to start. It allows you to try all available filters by drag & dropping them to see in real time what effect each does.
How can you resist this cutie animated dog by David? That shaky animation you see (called squigglevision) is made with two SVG filters:
🏆 viewBox Challenge!
Each edition we’ll give you a theme to kick-start your imagination. We’ll feature our favourite one in next month’s edition.
Last month’s challenge was Galaxy
We loved Saranya Mohan’s space walk. It’s based on this Dribbble shot and uses Greensock for the animation.
🎨 This months theme is SVG Filters
Can you make a piece of generative art utilising some SVG elements and filters?
What about creating an image treatment – like the filters used on instagram.
Some SVG filter attributes, like the
baseFrequency in feTurbulence are animatable… what effects can you create?
Tag your CodePens with viewBoxChallenge and @ us on Twitter with #viewBoxChallenge