<div id="wrap1">
    <svg id="ellipse" version="1.1">
    <path id="thePath" fill="transparent" />

       <text stroke="black">
          <textPath xlink:href="#thePath" dy="5" id="tp" lengthAdjust="spacingAndGlyphs">
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning 
          </textPath>
        </text>
    
    </svg>
</div>

<div id="wrap2">
    <svg id="ellipse2" version="1.1">
    <path id="thePath2" fill="transparent" />

       <text stroke="black">
          <textPath xlink:href="#thePath2" dy="5" id="tp2" lengthAdjust="spacingAndGlyphs">
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning
          • of en end and a beginning 
          </textPath>
        </text>
        
        
    </svg>
</div>

<style>


#wrap1{
    width:100%;
    height:100%;
    top: 0;
    left: 0;  
}
#wrap1 text {
    color: #111111;
    /*font-size: 30px;*/
    font-weight:500;
    font-family: 'Manrope',Arial,sans-serif;
    fill: #111111;
    stroke:none;
}


#wrap2{
    width:100%;
    height:100%;
    top: 0;
    left: 0;  
    transform:rotate(30deg);
}
#wrap2 text {
    color: #717171;
    font-weight:500;
    font-family: 'Manrope',Arial,sans-serif;
    fill: #717171;
    stroke:none;
}
</style>


<script>

$(window).load(function() {
function Init1() {
  let w = $('#wrap1').width();
  let h = $('#wrap1').height();
  ellipse.setAttributeNS(null, "viewBox", `0 0 ${w} ${h}`);
  
  let d = `M${9*w / 10},${h / 2}
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${w / 10} ${5 * h / 10}
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${9 * w / 10} ${5 * h / 10} 
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${w / 10} ${5 * h / 10} 
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${9 * w / 10} ${5 * h / 10} `;
  
  thePath.setAttributeNS(null, "d", d);
  let path_length =  thePath.getTotalLength();
  
  let font_size = 100;
  ellipse.style.fontSize = font_size+"px"; 
  
   while(tp.getComputedTextLength() > path_length / 2 ){
    
    font_size -=.10;
    
    ellipse.style.fontSize = font_size+"px";
  }
  //font_size -=.5;
  //ellipse.style.fontSize = font_size+"px";
}


function Init2() {
  let w = $('#wrap2').width();
  let h = $('#wrap2').height();
  ellipse2.setAttributeNS(null, "viewBox", `0 0 ${w} ${h}`);
  
  let d = `M${9*w / 10},${h / 2}
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${w / 10} ${5 * h / 10}
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${9 * w / 10} ${5 * h / 10} 
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${w / 10} ${5 * h / 10} 
  A${4 * w / 10},${4 * h / 10} 0 0 1 ${9 * w / 10} ${5 * h / 10} `;
  
  thePath2.setAttributeNS(null, "d", d);
  let path_length =  thePath2.getTotalLength();
  
  
  let font_size = 100;
  ellipse2.style.fontSize = font_size+"px"; 

  
   while(tp2.getComputedTextLength() > path_length / 2 ){
    
    font_size -=.10;
    
    ellipse2.style.fontSize = font_size+"px";
  }
  //font_size -=.5;
  //ellipse.style.fontSize = font_size+"px";
  
  
}


window.setTimeout(function() {
  Init1();
  Init2();
  window.addEventListener("resize", Init1, false);
  window.addEventListener("resize", Init2, false);
}, 15);


let so = 50;

function Marquee() {
  requestAnimationFrame(Marquee);
  tp.setAttributeNS(null, "startOffset", so + "%");
  if (so <= 0) {
    so = 50;
  }
  so -= 0.10;
}

Marquee();




let so2 = 50;

function Marquee2() {
  requestAnimationFrame(Marquee2);
  tp2.setAttributeNS(null, "startOffset", so2 + "%");
  if (so2 <= 0) {
    so2 = 50;
  }
  so2 -= 0.05;
}

Marquee2();





});
</script>