<svg width="" height="" viewBox="">
<g id="circleHolder" transform="translate(250 250)">
<circle cx="0" cy="0" r="400" fill="black" stroke="none" />
</g>
<g id="lineHolder" transform="translate(250 250) scale(1 1)">
<path d="M-250,0 h500" stroke="white" stroke-width="2" />
</g>
<g id="textHolder">
<text x="90" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">T</text>
<text x="115" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">E</text>
<text x="140" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">X</text>
<text x="165" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">T</text>
<text x="215" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">A</text>
<text x="240" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">N</text>
<text x="265" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">I</text>
<text x="290" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">M</text>
<text x="315" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">A</text>
<text x="340" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">T</text>
<text x="365" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">I</text>
<text x="390" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">O</text>
<text x="415" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">N</text>
</g>
</svg>
// svg variables
const viewportWidth = 500;
const viewportHeight = 500;
const viewBoxWidth = 500;
const viewBoxHeight = 500;
const w = viewBoxWidth;
const h = viewBoxHeight;
const dur = 1;
let theTween = null;
initSVG();
animate();
function initSVG() {
const svg = document.querySelector("svg");
svg.setAttribute("width", `${viewportWidth}`);
svg.setAttribute("height", `${viewportHeight}`);
svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
}
function animate(){
}
