Select Page

Category: SVG

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

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 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 see it. But if you’re somewhere where the internet is slow or has high latency (or if you’re Karl Dubost and literally block CSS), you’ll probably see it all the time. I was an offender before I learned how obnoxious this is. At first, it felt weird to size things in HTML rather than CSS. My solution now is generally to leave sensible defaults on inline SVG (probably icons) like height="20" width="20" and still do my actual sizing in CSS. Direct Link to Article — Permalink Discover The Fatwigoo is a post from CSS-Tricks...

Read More

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one. The last example showcased making the shape of a mouth to go from sad to glad by changing the d attribute of the path we used to...

Read More
www.000webhost.com