Tekst rond een cirkel Nieuw

<!-- Tekst rond een cirkel · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="crm"><a class="crm__badge" href="#" aria-label="Plan een gratis opname"><svg class="crm__ring" viewBox="0 0 200 200" aria-hidden="true"><defs><path id="crm-path" d="M100,100 m-80,0 a80,80 0 1,1 160,0 a80,80 0 1,1 -160,0"/></defs><text><textPath href="#crm-path" textLength="498" lengthAdjust="spacing">GRATIS OPNAME · BINNEN 48 UUR · REGIO HAAGLANDEN · </textPath></text></svg>
<span class="crm__ticks" aria-hidden="true"></span><span class="crm__core"><svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8" fill="none" stroke="currentColor" stroke-width="2"/></svg></span></a>
<div class="crm__txt"><span class="crm__kk">Schilder &amp; afwerking</span><p class="crm__h">Plan een opname bij u thuis.</p><p class="crm__p">We komen binnen 48 uur kijken en u krijgt dezelfde week een prijs. Den Haag, Rijswijk, Delft en Westland.</p></div></div>
</div>

/* Tekst rond een cirkel · NedDev · eigen werk. */
.crm{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:16px 20px;container-type:inline-size}
.crm__badge{position:relative;display:block;width:clamp(118px,38cqw,168px);aspect-ratio:1;color:#0a0a0a;text-decoration:none;border-radius:50%}
.crm__badge:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.crm__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crm__ring text{font:600 13px 'JetBrains Mono',monospace;fill:#0a0a0a;letter-spacing:.06em}
.crm__ticks{position:absolute;inset:21%;border-radius:50%;background:repeating-conic-gradient(#0a0a0a 0 1.2deg,transparent 1.2deg 10deg);-webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87%);mask:radial-gradient(closest-side,transparent 86%,#000 87%)}
.crm__core{position:absolute;inset:27%;border-radius:50%;background:#0a0a0a;color:#F5480F;display:grid;place-items:center;transition:background .3s,color .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.crm__core svg{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.crm__badge:hover .crm__core,.crm__badge:focus-visible .crm__core{background:#F5480F;color:#fff;transform:scale(1.06)}
.crm__badge:hover .crm__core svg,.crm__badge:focus-visible .crm__core svg{transform:rotate(45deg)}
.crm__kk{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#F5480F}
.crm__h{margin:5px 0 6px;font:700 clamp(17px,5.6cqw,24px)/1.05 'Switzer',sans-serif;letter-spacing:-.03em}
.crm__p{margin:0;font-size:12px;line-height:1.5;color:#57534e}
@container (max-width:380px){.crm{gap:12px;padding:12px 14px}.crm__p{font-size:11px}}

// Tekst rond een cirkel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.crm')||root;
var uid='crm-p'+Math.random().toString(36).slice(2,8),path=root.querySelector('#crm-path'),tp=root.querySelector('textPath');
if(path){path.id=uid;tp.setAttribute('href','#'+uid);}
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
var badge=root.querySelector('.crm__badge');
var a1=root.querySelector('.crm__ring').animate([{transform:'rotate(0deg)'},{transform:'rotate(360deg)'}],{duration:18000,iterations:Infinity});
var a2=root.querySelector('.crm__ticks').animate([{transform:'rotate(0deg)'},{transform:'rotate(-360deg)'}],{duration:30000,iterations:Infinity});
var rate=1,target=1;
function on(){target=4;}function off(){target=1;}
badge.addEventListener('mouseenter',on);badge.addEventListener('mouseleave',off);badge.addEventListener('focus',on);badge.addEventListener('blur',off);
(function f(){rate+=(target-rate)*.06;a1.playbackRate=rate;a2.playbackRate=rate;requestAnimationFrame(f);})();
}
init(document.querySelector('.jouw-container'));