Grainy Gradients

By layering a noisy SVG background and a gradient on top of each other, in combination with a filter that increases the contrast, Jimmy Chion creates these wonderful “Grainy Gradients”. See the Pen Grainy Gradient, step 3 by Jimmy Chion (@cjimmy) on CodePen. Over at CSS-Tricks he lays out the details: In this article, we’ll …

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

Over at Smashing Magazine, Dirk Weber digs into Displacement Filtering with the SVG feDisplacementMap-filter: A displacement operation can visually distort any graphic it is applied to. You can create warp effects, twirls or ripples like you would do with a Photoshop distortion filter. The post goes into a lot of detail and contains lots of …

Cloud Function to generate SVG Sparklines

Zach Leat recently created a cloud function that dynamically generates sparklines. Under the hood sits the the sparkline-svg package to generate the SVG. The datapoints themselves can be passed in via the URL. Image URLs have the formats: /[height]x[width]/[values]/ /[height]x[width]/[values]/[color]/ The code is meant to be deployed as a Netlify Serverless Function. Every Fire needs …

Image Cut-Out Effects using CSS or SVG

Ahmad Shadeed shows us how to do image cut-out effects, using either CSS or SVG. Handy to — for example — show a group of avatars. See the Pen Seen Avatars – SVG Mask by Ahmad Shadeed (@shadeed) on CodePen. Looking at the CSS variant: I was familiar with -webkit-mask-image and that you could combine …

Natural Shadows in CSS with inlined SVG filters

Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter. 💁‍♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a …

Perfect Tooltips With CSS Clipping and Masking

In this post Louis Hoebregts creates nice tooltips. No, not a typical triangle injected at the bottom but a nice curved one, also letting the image underneath peek through. For it he uses mask-image consisting of two parts: one rectangle overlaying the top part of the image + one SVG arrow overlaying the bottom part. …

Mono Icons

A simple, consistent open-source icon set designed to be used in a wide variety of digital products. The folks at Mono have released an update to their Icon Set, now totalling 177 icons in total. Available as SVGs (recommended) but can also be included as an icon font. Mono Icons →Mono Icons (GitHub) →

Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock

Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …