This was a fun lil challenge. How to turn any SVG path into a guide on which kids can draw/drag on top.
Only if I would have found this article before implementing some weird hacks.
Luckily I found this great library (points-on-path) that allowed me to calculate a set of points that then I used to do tracking of the mouse, simplifying the logic for guiding an object along the path depending on mouse position.
Also this was a great resource (that of course I found after finishing the code 😂) https://www.svg-animations.how/.
CleanShot 2023-12-12 at 17.09.49.mp4
