Hey friends,

I'm grateful for some rain and some cooler temperatures this week! 🌧️

Things I Built

I was doing a little spring/summer cleaning and dug up and better catalogued two experiments I had made: Brainwave Splines and a Delayed Mouse Tracker

I've written about this before, but the spline technique is pretty interesting. I learned this from George Francis who does a better job explaining everything in this post. The basic idea is you take an empty SVG and create six equidistant points on it, giving you a hexagon. Then you use the Catmull-Rom Spline algorithm to draw a line between those six points. The spline algorithm will create smooth organic lines which turns the hexagon into an almost-circle. Now when you randomly animate those points you get a neat organic blob! For this demo, the goal was to make them look like brainwaves, so I layered two blobs as stroke-only SVGs. The effect turned out pretty neat!

The mouse tracker was created as an experiment to draw some interest to a CTA button. We create an SVG circle on the page and track the mouse movement. We then kick off a loop that checks the distance between the circle and the mouse, then moves the circle towards the cursor at a predefined speed per animation loop (which is how we achieve the delay). We're also checking how close we are to the target button. We know the difference of the X/Y coordinates which means we have two sides of a triangle. BY THE POWER OF PYTHAGORAS (thanks high school math class) we can find the distance between the mouse and the button and apply a scaling effect as the mouse gets closer.

Interesting Web Bits

• Google Docs will now convert Markdown on pasting or copy contents as Markdown, which is pretty neat.
• Apparently you can use CSS vars to get the width and height of the viewport WITHOUT any JS overhead. 🤯
• Hot Wax is delightful mix between tetris and ... burning candles?
• I'm a big fan of using a work journal and it's interesting to see everyone's approaches. I talk about my own approach of keeping project logs in a post from a few months ago.
• Stuff like this reminds me of the tiny phones of the past. But would I ACTUALLY want a tiny phone...? 🤔