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:filter:url(#mySVGFilter);
Check it out in action!
✏️ Article(s)
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.
✨ Fun demos
Ripple -- view on CodePen
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 feTurbulence and feDisplacementMap to create a ripple effect.
dropplets -- view on CodePen
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.
Alex the CSS Husky
How can you resist this cutie animated dog by David? That shaky animation you see (called squigglevision) is made with two SVG filters: feTurbulence and feDisplacementMap.
🏆 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
Ideas...
- 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
baseFrequencyin feTurbulence are animatable... what effects can you create?