Tutorial Experience: How to Animate SVG Shapes on Scroll

I liked doing a tutorial so much yesterday that I figured I'd do another one today and do the same write-up treatment. This time, I'm doing something much more visual: animating on scroll with SVG's. This one's another Codrops tutorial: How to Animate SVG Shapes on Scroll

Immediately I'm a little nervous about this because it seems like I'm going to have to use Sketch or something to make an SVG of a cool wavy line thing. Fortunately Mary Lou (the author) provides a link to a tool she uses for optimization, SvgPathEditor, which gives me a decent in-browser editing experience without having to buy a license for Sketch. After a few minutes of fiddling around, I've got a cool-looking curvy line. It's not particularly inspiring, but it'll be good enough for my purposes:

M 0 0 H 21 C 7 0 6 6 0 0

And I understand I'm going to make it transition to this:

M 0 0 H 21 C 7 0 12 0 0 0

Well actually that's backwards, it's going to go from that second one to the first one. But I get the idea: the animation happens between a straight line and a drippy curvy thing.

Her tutorial says we can use these in our HTML, just the same way I've dumped them into this document. I don't really understand what this HTML she's showing does exactly or how she intends to use it, so I'm going to do some blind copy-pasting in my own code to experiment... which reminds me that I'm going to need to find a place to dump all of this code. Her repo is already too populated (the same whine I had about the last tutorial) so I'm going to need to figure out what I want to do here. The Codepen thing worked out last time, so I'll just do that again I guess.

While I try to copy and paste the sample code, I get annoyed about how there's no little helper clipboard thing that pops up. My site should probably have one of these too for where I provide code samples. 😬

As I'm copy and pasting I realize she's referencing a color variable I've not set. Then I go to start the JavaScript part and she's talking about importing libraries. From where?? Clearly I'm supposed to be doing this on a local project.

At this point, I took a big break and decided to come back later.