SVG anchoring

by Richard Hunter

HTML

<body>
    <div id="svgContainer">
      <svg viewBox="0 0 1600 398" xmlns="http://www.w3.org/2000/svg">
        <path stroke="#FFF" d="m320,235c1.66135,-1 4.68395,-2.22148 6.64539,-3c7.46902,-2.96448 18.06868,-3.99658 38.21099,-5c21.52395,-1.07225 53.16312,0 78.08333,0c36.54965,0 61.57116,-0.29359 94.69681,4c21.66845,2.80856 46.12298,6.87502 68.11525,10c19.6705,2.79506 38.44959,4.38249 54.82447,7c15.23291,2.43497 28.39045,6.82715 41.53369,11c15.12907,4.80331 33.01746,13.15533 43.19504,18c13.03109,6.20297 25.29854,11.69565 36.54965,17c12.05846,5.68494 21.59752,11 31.5656,16c9.96809,5 19.55693,10.38528 33.22695,15c12.96042,4.37515 26.69513,7.77457 38.21099,10c23.51551,4.5444 31.37517,6.99707 53.16312,8c11.59556,0.53375 24.92021,0 38.21099,0c9.96809,0 28.04984,-1.54138 41.53369,-3c14.80692,-1.60175 30.01569,-2.51566 44.85638,-4c15.1097,-1.51126 28.43395,-3.539 43.19504,-6c15.189,-2.53235 33.17442,-8.05334 41.53369,-11c11.55805,-4.07422 21.41763,-7.19577 33.22695,-11c9.82592,-3.16531 23.3773,-6.81631 36.54965,-10c11.74128,-2.8378 18.39569,-5.8819 26.58156,-9c5.06172,-1.92807 9.96809,-5 9.96809,-5c1.66135,-2 3.3227,-2 3.3227,-3l-1.66135,-1" id="svg_1" stroke-width="1.5" fill="none" />
        <path stroke="#FFF" d="m320,271c1.66135,-1 4.68395,-2.22148 6.64539,-3c7.46902,-2.96448 18.06868,-3.99658 38.21099,-5c21.52395,-1.07225 53.16312,0 78.08334,0c36.54964,0 61.57115,-0.29359 94.6968,4c21.66845,2.80856 46.12298,6.87502 68.11525,10c19.6705,2.79506 38.44959,4.38249 54.82447,7c15.23291,2.43497 28.39044,6.82715 41.53369,11c15.12907,4.80331 33.01745,13.15533 43.19503,18c13.0311,6.20297 25.29854,11.69565 36.54965,17c12.05846,5.68494 21.59751,11 31.5656,16c9.96809,5 19.55693,10.38528 33.22695,15c12.96042,4.37515 26.69513,7.77457 38.21099,10c23.51551,4.5444 31.37518,6.99707 53.16312,8c11.59557,0.53375 24.92022,0 38.211,0c9.96808,0 28.04984,-1.54138 41.53368,-3c14.80693,-1.60175 30.0157,-2.51566 44.85639,-4c15.1097,-1.51126 28.43394,-3.539 43.19503,-6c15.189,-2.53235...

CSS

body {
  margin: 0;
  background: grey;
  --offset-left: 300px;
  --offset-top: 200px;
  font-family: helvetica;
}

h1, h2 {
  margin: 0
}

#svgContainer {
  position: absolute;
  left: var(--offset-left);
  top: var(--offset-top);
  z-index: -1;
  width: 200%;
  transform: translate(-50%, -80%);
  
}

#Container {

}

#textContainer {
  margin-left: var(--offset-left);
  margin-top: var(--offset-top);
}