Text arque cslide

<div class=”scroll-circle-wrap scroll-circle-click”>
<div class=”scroll-circle”>
<svg viewBox=”0 0 240 240″ class=”scroll-circle-svg”>
<defs>
<!– path jahan text chalega (circle se bahar) –>
<path id=”text-circle”
d=”M120,120 m-90,0 a90,90 0 1,1 180,0 a90,90 0 1,1 -180,0″ />
</defs>

<!– inner main circle –>
<circle cx=”120″ cy=”120″ r=”78″
fill=”none”
stroke=”#f5f5f1″
stroke-width=”1.5″ />

<text class=”scroll-circle-text”>
<textPath xlink:href=”#text-circle”
startOffset=”50%”
text-anchor=”middle”>
SCROLL DOWN • SCROLL DOWN • SCROLL DOWN • SCROLL DOWN
</textPath>
</text>
</svg>

<!– center arrow –>
<div class=”scroll-circle-arrow”>
<span class=”scroll-circle-arrow-icon”>↗</span>
</div>
</div>
</div>

<style>
.scroll-circle-wrap{
width: 150px;
height: 150px;
}

.scroll-circle-click{
cursor: pointer;
}

.scroll-circle{
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.scroll-circle-svg{
width: 100%;
height: 100%;
animation: scroll-rotate 10s linear infinite;
}

.scroll-circle-text{
font-family: “Oswald”, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
font-size: 14px;
letter-spacing: 0.25em;
text-transform: uppercase;
fill: #f5f5f1;
}

/* circle stroke: normal = halka, hover = full */
.scroll-circle-svg circle{
stroke: rgba(245, 245, 241, 0.35); /* thora transparent */
transition: stroke 0.25s ease;
}

.scroll-circle-wrap:hover .scroll-circle-svg circle{
stroke: #f5f5f1; /* tumhara main color */
}

.scroll-circle-arrow{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}

/* arrow bigger */
.scroll-circle-arrow-icon{
font-size: 28px;
color: #C32032;
}

@keyframes scroll-rotate{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
var trigger = document.querySelector(“.scroll-circle-click”);
var target = document.querySelector(“#down-scroll”);

if (trigger && target) {
trigger.addEventListener(“click”, function (e) {
e.preventDefault();
target.scrollIntoView({ behavior: “smooth” });
});
}
});
</script>