<svg width="" height="" viewBox="">
<defs>
<clipPath id="text-clip-path">
<rect x="0" y="0" width="500" height="250" />
</clipPath>
</defs>
<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" clip-path="url(#text-clip-path)">
<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(){
theTween = gsap.timeline({repeat: -1, yoyo:true, repeatDelay: 1});
theTween.fromTo(
"#circleHolder",
{ attr: { transform: "translate(250 -30) scale(.03)"} },
{ attr: { transform: "translate(250 250) scale(.03)"}, duration: dur, ease:"back"}
).fromTo(
"#circleHolder",
{ attr: { transform: "translate(250 250) scale(.03)"} },
{ attr: { transform: "translate(250 250) scale(1)"}, duration: dur}
).fromTo(
"#lineHolder",
{ attr: { transform: "translate(250 250) scale(0 1)"} },
{ attr: { transform: "translate(250 250) scale(1 1)"}, duration: dur}
).fromTo(
".letter",
{ attr: { y:330} },
{ attr: { y:230 }, duration: dur, stagger:.1, ease:"back"}
);
}
