alrra/browser-logos — A repository collecting high resolution web browser logos

If you’re looking for high resolution web browser logos to include in your presentations or imagery, alrra/browser-logos has them all. You may want these for a presentation, a blog post or for the site featuring your brand new awesome lightbox script (please no!). All logos are high resolution with transparent backgrounds. alrra/browser-logos Repo →alrra/browser-logos Logos …

Building an Adaptive SVG favicon that responds to Dark Mode

Speaking of favicons: In the latest episode of GUI Challenges, Adam details how to create an adaptive favicon that responds to Dark Mode. SVG Favicons were introduced in Chromium 80 (2019) and Firefox 41 (2015). No support in Safari. Building an adaptive favicon → 🤔 On the WebKit Issue tracker I can find this RESOLVED …

SVGcode: a PWA to convert raster images to SVG vector graphics

Thomas Steiner has released a tool named SVGcode. It’s a PWA to convert raster images to SVG vector graphics. SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, …

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 …