: Responsive SVG path without distorting stroke I have a simple SVG path with a stroke that I want to responsively resize with the browser window. The problem is that when my paths aspect ratio

@Berryessa866

Posted in: #Path #ResponsiveDesign #Stroke #Svg

I have a simple SVG path with a stroke that I want to responsively resize with the browser window. The problem is that when my paths aspect ratio is changed, the stroke is distorted.

This is the original path on the left and the distorted shape on the right:



Live example (resize your browser): codepen.io/Cai_/pen/pyBobP
I need the rectangle to be one single path with a stroke so I can animate stroke-dashoffset / stroke-dasharray etc.

I could use javascript to update the path but I would like to know if there is a way to do this with pure SVG (and CSS).

Can I create a responsive SVG path without stretching or distorting the stroke?

Vote Up Vote Down

Login to post a comment!