Select Page

Category: SVG

What is SVG good for?

Y’all probably wouldn’t be surprised if I told you it’s pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I’m a fan of just inlining those suckers, particularly when they are pretty simple. But what else? Logos is a classic example! A lot of people dip their toes in this way. You don’t have to inline the SVG if you don’t want. It could be an or background-image as well. These are really simple things though. At it’s heart, SVG is simply a vector-based image format capable of just about anything....

Read More

Responsive Knockout Text With Looping Video

Here’s an idea! Let’s make an an HTML play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. A live demo will explain more clearly: See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen. A key objective here is to develop this responsively. The idea is to not only scale the video in size to fit the parent container (as video generally does), but scale the text as well, maintaining the size relationship between the type and underlying video. We’re going to get there by using the CSS clip-path...

Read More

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 heavy (248k/56k gzip) for one micro-animation. Per the usual, I tried my hand at a minimal custom SVG with CSS animation and a small bit of JavaScript (~223b gzip). I’m pleased with the results. Here’s another example Jeremias Menichelli posted here on CSS-Tricks with the added twist of making them components in React and Vue. Direct Link to Article — Permalink The post Animated SVG Radial Progress Bars appeared first on CSS-Tricks....

Read More

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 the rest of the photo. It is a natural focal point to cut out and create our effects around. Image...

Read More

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 Independents are]: See the Pen Political Party Affiliation – #2 by Patrick Dillon (@pdillon) on CodePen. Filling a pie slice...

Read More
  • 1
  • 2
000webhost logo