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

Dynamic and Responsive SVG - SCSS.scss

.timeline {
  position: absolute;
  width: 100%;
  height: auto;
  top: 64px;
  left: -5px;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4250;
  stroke-dashoffset: 4250;
  @include xs-sm {
    top: 84px;
    stroke-dasharray: 4450;
    stroke-dashoffset: 4450;
  };
  @include gt-sm {
    top: 52px;
    stroke-dasharray: 4500;
    stroke-dashoffset: 4500;
  };
  path {
    fill: transparent;
    stroke: $purple;
    vector-effect: non-scaling-stroke;
    transition: stroke $transition-duration $cubic-bezier;
  }
}