Glad you found this! Not sure if you also saw https://observablehq.com/@visnup/slides but that's another similar option that offers e.g. keyboard shortcuts & a notes window. Both totally valid, personally I found Visnu's useful - just FYI :)
Love these illustrations! Re taking advantage of Observable, I wonder if you could also help folks grok the coordinate system by showing e.g. a simple canvas with an X,Y point on it, and two sliders to change X and Y - then you can demonstrate sliding them to show how the point moves (and they can play with it too). Very simple example of what I mean here: https://observablehq.com/d/22822bf854aba22d. And similar for the curve examples below, being able to manipulate the points with sliders or such may be useful for learners. Though you may be planning to do something like this as an exercise or such, and of course you know best how to teach your material! Just a thought, also looks great as-is (I think the illustration is quite clear). :)
For the canvas coordinate system, I'm not planning to spend that long on it and that's why they're just simple drawings. For the curves examples below I did consider sliders (bc that'd indeed be a great demonstration) but I decided I'd do it if I had time at the end ^^;; For now I'm planning to work through the smiley face exercise with my ipad+pencil with the attendees, which is actually closest to my workflow when I'm coding SVG paths.
Thank you for the suggestions!
i would recommend keeping this pinned open. i know you'll be talking through this but i couldn't tell at first glance if i should be typing just the path string or the whole svg into the "smileyPath" variable"