Select Page

Category: SVG

Moving Text on a Curved Path

There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But… the pictures aren’t actually selfies because they are taken by someone else. The article has his hilarious line of text that wiggles by on a curved line as you scroll down the page. Let’s look at how they did it. Movie: The curved line is drawn in SVG as a , and the is set upon it by a : *The pictures are not technically selfies. The movement trick happens by adjusting the startOffset attribute of the textPath element. I’m not 100% sure how they did it, but we can do some quick hacky math by watching the scroll position of the page and setting that attribute in a way that makes it move about as fast and far as we want. const textPath = document.querySelector("#text-path"); const h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; document.addEventListener("scroll", e => { let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100; textPath.setAttribute("startOffset", (-percent * 40) + 1200) }); Here’s a demo: See the Pen Selfie Crawl by Chris Coyier (@chriscoyier) on CodePen. Text on a curved line is a cool design look for any number of reasons! It just isn’t seen that much on the web, so...

Read More

Making a Realistic Glass Effect with SVG

I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don’t have to reproduce an effect for every article or product on your site. Today I would like to show you how I came up with this glass text effect. Step 0: Patience and space SVG can be a lot to take on, especially when...

Read More

Zdog

David DeSandro has loads of super cool JavaScript libraries he’s created over the years. His latest is Zdog, a “round, flat, designer-friendly pseudo-3D engine for canvas & SVG.” It’s only been about a month since he dropped it (although, like any good library, it’s been simmering) and it has been pretty incredible to watch it capture the imagination of loads of designers and developers. I’m shouting out Zdog here because I think it’s worth y’all checking out. There is something about the API and how easy it becomes to draw in a 3D space that is clicking with folks....

Read More

Menus with “Dynamic Hit Areas”

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you’re in tricky territory. For one, they should work with clicks and taps, too. Without that, you’ve broken the menu for anyone without a mouse. That doesn’t mean you can’t also use :hover. When you use a hover state to reveal more content, that means an un-hovering state needs to hide them. Therein lies the problem. The problem is that if a submenu pops out somewhere on hover, getting your mouse over to it might involve moving it along...

Read More

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