Blog code snippet - https://medium.com/gofaros/dynamic-and-responsive-svg-3de87f757e0d

Dynamic and Responsive SVG - Javascript.js

scale() {
  // At 350px screen width the pathHeight coefficient should be 1
  const startPathHeight = 1;
  const startScreenWidth = 350;
  // At 450px screen width the pathHeight coefficient should be .69
  const midPathHeight = .69;
  const midScreenWidth = 450;
  // At 600px screen width the pathHeight coefficient should be .48
  const endPathHeight = .48;
  const endScreenWidth = 600;
  const lgWidth = 1204;
  const onResize = () => {
    let pathHeight;
    if (window.innerWidth < midScreenWidth) {
      pathHeight = startPathHeight + (((startPathHeight - midPathHeight) / (Math.pow(midScreenWidth, .1) - Math.pow(startScreenWidth, .1))) * (Math.pow(startScreenWidth, .1) - Math.pow(window.innerWidth, .1)));
    } else if (window.innerWidth < endScreenWidth) {
      pathHeight = midPathHeight + (((midPathHeight - endPathHeight) / (Math.pow(endScreenWidth, .1) - Math.pow(midScreenWidth, .1))) * (Math.pow(midScreenWidth, .1) - Math.pow(window.innerWidth, .1)));
    } else if (window.innerWidth > lgWidth) {
      pathHeight = 8;
    } else {
      pathHeight = 78 - 2 * Math.sqrt(window.innerWidth);
    }
    this.pathHeight = +pathHeight.toFixed(4);
  };
}