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 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): http://codepen.io/Cai_/pen/pyBobP
I need the rectangle to be one single path with a stroke so I can animate
Can I create a responsive SVG path without stretching or distorting the stroke?