JSFiddle - React, Tailwind, and code Playground

HTML

<div class="svg-container">

<svg id="canvas" version="1.1"  viewBox="0 0 500 500">  

    <path width="100%"  id="curve" fill="none" d="M0,0 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" />

    <text font-family="Helvetica" font-size="20" fill="black">
        <textPath xlink:href="#curve" startOffset="0%" id="text">Last News</textPath>
    <animate xlink:href="#text" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>
    </text>
</svg>
</div>

CSS

body{
				margin: 0;
			}
			
			#canvas{
				height: 100vh;
				width: 100vw;
			}
			.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}