Select Page

Category: SVG

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation. You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons” so we know what we’re referring to as we go. Like a lot of things on the web, we can make ribbons like these in...

Read More

Mask Compositing: The Crash Course

At the start of 2018, as I was starting to go a bit deeper into CSS gradient masking in order to create interesting visuals one would think are impossible otherwise with just a single element and a tiny bit of CSS, I learned about a property that had previously been completely unknown to me: mask-composite. As this is not a widely used property, I couldn’t find any comprehensive resources on this topic. So, as I began to use it more and learn more about it (some may remember I’ve mentioned it before in a couple of other articles), I...

Read More

Blobs!

I was recently a guest editor for an issue of Bizarro Devs. It’s a great newsletter! Go sign up! I put in a bunch of links around blobs. Like those weird squishy random shapes that are so “in” right now. Here are those links as well. I’m always a fan of publishing stuff I write 😉 Blobs! Blobs are in! Blobs are — ahem — a bit bizarre. I’ll bask in a design like this annual report cover by Matt Pamer all day. I enjoy watching a design trend like this manifest itself in design tooling and become applied...

Read More

Building a Donut Chart with Vue and SVG

Mmm… forbidden donut.” – Homer Simpson I recently needed to make a donut chart for a reporting dashboard at work. The mock-up that I got looked something like this: My chart had a few basic requirements. It needed to: Dynamically calculate its segments based on an arbitrary set of values Have labels Scale well across all screen sizes and devices Be cross-browser compatible back to Internet Explorer 11 Be accessible Be reusable across my work’s Vue.js front end I also wanted something that I could animate later if I needed to. All of this sounded like a job for...

Read More

SVG Marching Ants

Maxim Leyzerovich created the marching ants effect with some delectably simple SVG. See the Pen SVG Marching Ants by Maxim Leyzerovich (@round) on CodePen. Let’s break it apart bit by bit and see all the little parts come together. Step 1: Draw a dang rectangle We can set up our SVG like a square, but have the aspect ratio ignored and have it flex into whatever rectangle we’d like. Right away, we’re reminded that the coordinate system inside an SVG is unit-less. Here we’re saying, “This SVG is a 40x40 grid. Now draw a rectangle covering the entire grid.”...

Read More

Using CSS Clip Path to Create Interactive Effects, Part II

This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible. One of the biggest drawbacks of CSS clipping, at the time of writing, is browser support. Not having 100% browser coverage means different experiences for viewers in different browsers. We, as developers, can’t control what browsers support — browser vendors are the ones who implement the spec and different vendors will have different agendas. One thing we can do to overcome inconsistencies is use alternative technologies. The feature set of CSS and SVG sometimes overlap. What works in one may work in the other and vice versa. As it happens, the concept of clipping exists in both CSS and SVG. The SVG clipping syntax is quite different, but it works the same. The good thing about SVG clipping compared to CSS is its maturity level. Support is good all the way back to old IE browsers. Most bugs are fixed by now (or at least one hope they are). This is what the SVG clipping support looks like:...

Read More

On xlink:href being deprecated in SVG

A reader wrote in to tell me we should update our articles about SVG elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So… I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari...

Read More

How to create a logo that responds to its own aspect ratio

One of the cool things about is that it’s literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it. This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that way. Estelle Weyl used that ability to do responsive images before responsive images. Another thing that has really tripped people’s triggers is using that local media query stuff to make responsive logos. Most famously Joe Harrison’s site, but Tyler Sticka, Jeremy Frank, and Chris Austin all had a go as well. Nils Binder has the latest take. Nils take is especially clever in how it uses s referencing other s for extra efficiency and min-aspect-ratio media queries rather than magic number widths. For the record, we still very much need container queries for HTML elements. I get that it’s hard, but the difficulty of implementation and usefulness are different things. I much prefer interesting modern solutions over trying to be talked out of it. Direct Link to Article — Permalink The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks....

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
  • 1
  • 2
www.000webhost.com