

CSS-Tricks by Chris Coyier

Poly Fluid Sizing

Jake Wilson digs in, and while he finds that calc() isn’t quite up for the job (e.g. font-size: calc(3vw * 3vw); /* This doesn't work in CSS */), he does land on a technique he’s calling Poly Fluid Sizing, which takes a map of breakpoints and font sizes and linear interpolates them just about as good (*it depends*).

Direct Link to ArticlePermalink

Poly Fluid Sizing is a post from CSS-Tricks

Scroll Drawing

We’ve taken an in-depth look at how SVG line drawing works before. It’s a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you can move it such that it covers the entire path again, which makes it appear as if it’s drawing itself.




Step 1: Get a <path>

It has to be a <path>. Any other kind of SVG element won’t work (e.g. <rect>). You can force elements to be paths though. I have a Lodge video on this. You may need to resort to trickery like adding an additional vector point along an already straight edge.


Give the path an ID if it doesn’t have one:


Step 2: Find length of that path

// Get a reference to the <path>

var pathLength = path.getTotalLength();

Step 3: Hide shape by offsetting dash




// When the page scrolls...
window.addEventListener("scroll", function(e) {
  // What % down is it? 
  // Length to offset the dashes
  var drawLength = pathLength * scrollPercentage;
  // Draw in reverse = pathLength - drawLength;

Step 5: If scrolled to bottom, remove dashing

If you don’t do this, the shape doesn’t look quite as neatly/sharply finished as if you didn’t applying any dashing at all.

I’m not sure why. I don’t think you can fiddle with the numbers to fix it. But it’s easy enough to remove.

  // ... at bottom of scrolling function

  } else { = pathLength + ' ' + pathLength;

The 0.99 is to account for fuzzy math. Sometimes you don’t get a perfect 1.0 from the division.

See a full page demo.

Scroll Drawing is a post from CSS-Tricks