Creating a Panning Effect for SVG

Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.

I made this demo below to show how I’d approach this question:
See the Pen Demo – SVG Panning by Louis Hoebregts (@Mamboleoo) on CodePen.
Here are the four steps to make the above demo work:

Get mouse and touch events from the user
Calculate the mouse offsets from its origin
Save


The post Creating a Panning Effect for SVG appeared first on CSS-Tricks.

Link: https://css-tricks.com/creating-a-panning-effect-for-svg/

How to Create a Component Library From SVG Illustrations

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.

Here’s a GIF that shows what I mean:
What’s unDraw?
While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua:
Left: MentorOla…
The post How to Create a Component Library From SVG Illustrations appeared first on CSS-Tricks.

Link: https://css-tricks.com/how-to-create-a-component-library-from-svg-illustrations/

Animated SVG Radial Progress Bars

Dave Rupert shows us all how to animate radial progress bars in SVG with a tiny script alongside the stroke-dasharray and stroke-dashoffset properties:
For a client project we tasked ourselves with building out one of those cool radial progress bars. In the past, we’ve used entire Canvas-based charting libraries (156k/44k gzip), but that seemed like overkill. I looked at Airbnb’s Lottie project where you export After Effects animations as JSON. This is cool for complex animations, but the dependencies seemed …
The post Animated SVG Radial Progress Bars appeared first on CSS-Tricks.

Link: https://daverupert.com/2018/03/animated-svg-radial-progress-bars/

Scooped Corners in 2018

When I saw Chris’ article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like it, but with rounded, scooped corners instead. So, let’s see how we can do it that way instead and expand it to multiple corners while being mindful of browser support.
The post Scooped Corners in 2018 appeared first on CSS-Tricks.

Link: https://css-tricks.com/scooped-corners-in-2018/

CSS Techniques and Effects for Knockout Text

Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color.
While we’ve seen a number of ways to accomplish knockout text in the past, there are some modern CSS properties we can use now and even enhance the …
The post CSS Techniques and Effects for Knockout Text appeared first on CSS-Tricks.

Link: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

Using CSS Clip Path to Create Interactive Effects

Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how we can use these cut-out parts to create some interesting effects, combining these cut-out parts with the original image.

I’ll use the following photo as an example. The flower stands out from …

Using CSS Clip Path to Create Interactive Effects is a post from CSS-Tricks

Link: https://css-tricks.com/using-css-clip-path-create-interactive-effects/

Get Your SVGs Out of Your HTML

After this holiday season, many of us would like to lose a little weight, page weight that is. In my app, CodeTriage, I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire" bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.
Here’s the raw SVG:

Link: https://dzone.com/articles/get-your-svgs-out-of-your-html?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Using SVG to Create a Duotone Effect on Images

Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year in Music website (here is last year’s) which introduced bold, duotone images to their brand identity.
Well, thanks to the potentially life-saving powers of SVG, we can create these Photoshop-like “adjustment layers” with SVG filters.

Using SVG to Create a Duotone Effect on Images is a post from CSS-Tricks

Link: https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/

Simple Patterns for Separation (Better Than Color Alone)

Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.

Patrick Dillon tackled the Pie Chart thing
Enhancing Charts With SVG Patterns:
When one of the slices is filled with something more than color, it’s easier to figure out [who the …

Simple Patterns for Separation (Better Than Color Alone) is a post from CSS-Tricks

Link: https://css-tricks.com/simple-patterns-for-separation/

Discover The Fatwigoo

When you use a bit of inline and you don’t set height and width, but you do set a viewBox, that’s a fitwigoo. I love the name.
The problem with fatwigoo’s is that the <svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place.
It’s one of those things where if you develop with pretty fast internet, you might not ever …

Discover The Fatwigoo is a post from CSS-Tricks

Link: http://www.otsukare.info/2017/11/02/fatwigoo