Tekst rond een cirkel New

A round badge with text running along the edge that speeds up on hover, plus a counter-rotating tick ring. As a striking call to action next to a heading.

Schilder & afwerking

Plan een opname bij u thuis.

We komen binnen 48 uur kijken en u krijgt dezelfde week een prijs. Den Haag, Rijswijk, Delft en Westland.

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More text animations

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →