JSFiddle - React, Tailwind, and code Playground

HTML

<div> <svg class="svgwave" xmlns="http://www.w3.org/2000/svg" style="width:100vw; height:50%;overflow:visible ">
     <path id="wavepath" d="M  -150 300 L 3000 300 L 3000 800 L  -150 800 L  -150 300 " style="fill: transparent; stroke: transparent; stroke-width: 1px;"></path>
     <text text-anchor="left" style="text-transform: uppercase; font-family: Arial; font-size:calc(25vh + 25vw); fill: white;">
       <textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%">
         <animate attributeName="startOffset" from="0%" to="-42%" begin="0s" dur="12s" repeatCount="indefinite"></animate>
         ROCK ROCK ROCK ROCK ROCK ROCK ROCK ROCK ROCK ROCK
       </textPath>
     </text>
   </svg></div>
   
 <div> <svg class="rotateNeg90" xmlns="http://www.w3.org/2000/svg" style="width:100vw; height:50%;overflow:visible ">
     <path id="wavepath" d="M  -150 300 L 3000 300 L 3000 800 L  -150 800 L  -150 300 " style="fill: transparent; stroke: transparent; stroke-width: 1px;"></path>
     <text text-anchor="left" style="text-transform: uppercase; font-family: Arial; font-size:calc(25vh + 25vw); fill: white;">
       <textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%">
         <animate attributeName="startOffset" from="0%" to="-42%" begin="0s" dur="12s" repeatCount="indefinite"></animate>
         ROCK ROCK ROCK ROCK ROCK ROCK ROCK ROCK ROCK ROCK
       </textPath>
     </text>
   </svg></div>
   
 <div> <svg class="rotate30" xmlns="http://www.w3.org/2000/svg" style="width:100vw; height:50%;overflow:visible ">
     <path id="wavepath" d="M  -150 300 L 3000 300 L 3000 800 L  -150 800 L  -150 300 " style="fill: transparent; stroke: transparent; stroke-width: 1px;"></path>
     <text text-anchor="left" style="text-transform: uppercase; font-family: Arial; font-size:calc(25vh + 25vw); fill: white;">
       <textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%">
         <animate...

CSS

html,
body {
  background: black;
  margin: auto;
}

div {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
}

svg {
  margin: auto;
}
.rotateNeg90{rotate:-90deg;}
div+div{background:lightblue}
.rotate30{rotate:30deg;}
div+div+div{background:lightgreen;}