JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svg_wrapper">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 2850 1800" version="1.1" viewBox="0 0 2850 1800" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="SVGID_1_" x1="1425" x2="1425" y1="4.6407" y2="1804.6" gradientUnits="userSpaceOnUse">
		<stop stop-color="#7C4A74" offset="0"/>
		<stop stop-color="#FA798D" offset="1"/>
	</linearGradient>
</defs><g id="g0.0"><rect width="2850" height="1800" fill="url(#SVGID_1_)"/><circle cx="1409.8" cy="990.67" r="597.05" fill="#e5edd4" opacity=".08"/><circle cx="1409.8" cy="990.67" r="429.67" fill="#e5edd4" opacity=".08"/><circle cx="1409.8" cy="990.67" r="316.81" fill="#fff"/><path d="m1707.5 264.5c.588-1.213.61-2.531-.232-3.621-.65-.842-1.652-1.314-2.719-1.312-.903.002-1.843.357-2.477 1.008-1.051 1.079-1.134 2.629-.467 3.931.733 1.433 2.861 1.965 4.201 1.101 1.462-.943 1.885-2.668 1.101-4.201-.011-.021-.021-.042-.032-.063.103.244.206.489.309.733 0-.019-.01-.037-.011-.056v1.632c0-.016 0-.033.01-.049-.103.244-.206.489-.309.733.01-.014.016-.028.023-.042l-.48.621c.012-.012.025-.024.037-.036l-.621.48c.016-.01.032-.019.048-.029-.244.103-.489.206-.733.31.038-.018.078-.03.12-.036-.272.037-.544.073-.816.11.071-.008.131-.009.202-.002-.272-.037-.544-.073-.816-.11.042.006.082.017.12.034-.244-.103-.489-.206-.733-.31.016.009.032.018.049.028l-.621-.48c.013.012.025.023.038.035l-.48-.621c.01.014.016.028.024.042-.103-.244-.206-.489-.309-.733 0 .016.01.033.01.049v-1.632c0 .019-.01.038-.01.056.103-.244.206-.489.309-.733-.01.021-.021.042-.031.064-.365.752-.538 1.536-.31 2.366.196.712.747 1.484 1.411 1.835 1.376.726 3.453.441 4.2-1.102z" fill="#fff"/><path d="m1717.6 179.12c-.275.275-.551.55-.826.826-1.137 1.137-1.222 3.22 0 4.342 1.226 1.125 3.128 1.214 4.342 0l.826-.826c1.137-1.137 1.222-3.22 0-4.342-1.226-1.126-3.129-1.214-4.342 0z" fill="#fff"/><path d="m1757.5 137-.826-.826c-1.137-1.137-3.22-1.222-4.342 0-1.125 1.226-1.214 3.128 0 4.342l.826.826c1.137 1.137 3.22 1.222...

CSS

#svg_wrapper {
  padding: 20em 0;
}

JavaScript

let svg = document.querySelector("svg");
let groups = document.querySelectorAll("svg g[id]");

let lastKnownScrollPosition = 0;
let ticking = false;

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      parallax(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

function parallax(scrollPos) {
	let delta = svg.clientTop + svg.clientHeight * 0.5 - scrollPos;

	for (let i = 0; i < groups.length; ++i) {
  	let id = groups[i].getAttribute("id");
    let factor = parseFloat(id.substr(1)) * delta;
    groups[i].setAttribute("transform", "translate(0 " + factor + ")");
  }
  
}