SVG – Javascript World

April 18, 2018

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/

April 12, 2018

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/

April 3, 2018

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/

April 3, 2018

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/

March 6, 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/

January 22, 2018

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/

January 9, 2018

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

December 19, 2017

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/

November 12, 2017

Discover The Fatwigoo

When you use a bit of inline
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