JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">

  <div class="gradient_bg mask">
  </div>
  <svg width="300px" height="300px">
    <clipPath id="svgPath">
      <text x="0" y="0" textLength="300" font-family="sans-serif" font-size="100px" font-style="italic" font-weight="bold" text-anchor="middle">HOGE</text>
    </clipPath>
  </svg>
  
  <div class="qt1"></div>
  <div class="qt2"></div>
</div>

CSS

.gradient_bg {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: linear-gradient(270deg, #aaa, #ffffff);
  background-size: 100px 300px;
  -webkit-animation: AnimationName 15s ease infinite;
  animation: AnimationName 10s linear infinite;
  
}

@-webkit-keyframes AnimationName {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  @keyframes AnimationName {
        100% {
      background-position: 96% 100%
    }
  }

.mask {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

.test {
  width: 100%;
  height: 100vh;
  border: 1px solid #333;
  position: relative;
}

.test .qt1,
.test .qt2 {
  width: calc( 100% /2 );
  height: calc( 100% /2);
  position: absolute;
  z-index: -1;
}

.test .qt1 {
  top: 0;
  left: 0;
  background-color: #333;
}

.test .qt2 {
  bottom: 0;
  right: 0;
  background-color: #333;
}

JavaScript

/*
textの属性で　text-anchor="middle"を入れておく。
xは親要素の半分
yは親要素の半分 + fontのheightの半分(≠ px)
*/

(function($){
	
  var calcValue = function(){
  	var
    tgt = $("#svgPath text"),
    parent = tgt.closest(".test"),
    parentWidth = parent.outerWidth(),
    parentHeight = parent.outerHeight(),
    fontHeight = parseInt(tgt.attr("font-size"), 10);
    
    var centerWidth = parentWidth / 2;
    //heightにかける倍率はフォントの種類によって要調整
    var centerHeight = (parentHeight / 2) + fontHeight * 0.4;
    tgt.attr({
    	"x" : centerWidth,
      "y" : centerHeight
    });
  }
	
  //document ready
	$(function(){
  	calcValue();   
  });
  
  //document risize
  // resize
  $(window).on("resize", function(){
  	calcValue();
  });
  
})(jQuery);