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

Dynamic and Responsive SVG - Scroll reveal.js

scrollReveal(elem) {
  const className = 'is-visible';
  const ratio = .9;
  const isElementInViewport = (el) => {
    let rect = el.getBoundingClientRect();
    return (
      rect.top > 0 &&
      rect.top <= window.innerHeight * ratio
    );
  };
  const onVisibilityChange = (el, callback) => {
    let oldVisible;
    return () => {
      if (el.classList.contains(className)) return;
      let visible = isElementInViewport(el);
      if (visible && visible != oldVisible) {
        oldVisible = visible;
        if (typeof callback == 'function') callback();
      }
    };
  };
  let handler = onVisibilityChange(el, () => {
    el.addClass(className);
  });
  // Call this handler on document ready/load, on window resize,
  // and on the element scroll
}