Currently building an interactive landing page for a portfolio site. I'm trying to animate the stroke-width of an SVG based on the mouse position on the x-axis, using jQuery. I have a basic/core understanding of HTML, CSS, jQuery and SVGs, but I'm struggling to work out how to achieve this effect.
The problem I'm having is that I need the stroke to remain on the inside of the path, so that it doesn't extrude past the edge of the screen. After some research I can see that the stroke-alignment property has been added to the SVG spec, but has yet to be implemented https://stackoverflow.com/a/28787545.
Here is a crude example of the desired effect on a PDF file: https://pasteboard.co/JJ93yOn.gif
What would be the best way to achieve this?
