Logo with spinning text

logo_with_spinning_text.html

<div class="mark">
	<svg class="mark_svg" viewBox="0 0 300 300" role="img" aria-label="Rotating text around logo">
		<defs>
			<path id="ringPath" d="M 150,150
		   m -132,0
		   a 132,132 0 1,1 264,0
		   a 132,132 0 1,1 -264,0" />
		</defs>
		<image class="mark_logo" href="logo.png" x="42" y="42" width="216" height="216" preserveAspectRatio="xMidYMid meet" />
		<g class="mark_rotor">
			<text class="mark_text">
				<textPath href="#ringPath" startOffset="50%" text-anchor="middle">
					Design &bull; SEO &bull; Marketing &bull; Digital Agency &bull;
				</textPath>
			</text>
		</g>
	</svg>
</div>



<style>
	/* Responsive container: set the size you need */
	.mark {
		width: min(60vw, 320px);
		aspect-ratio: 1 / 1;
		margin: 0 auto;
	}
	
	.mark_svg {
		width: 100%;
		height: 100%;
		display: block;
		padding: 5px;
	}
	
	/* Logo fills most of the circle */
	.mark_logo {}
	
	.mark_text {
		font-size: clamp(26px, 3.5vw, 14px);
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}
	
	/* Smooth rotation */
	.mark_rotor {
		transform-box: fill-box;
		/* crucial for SVG */
		transform-origin: 50% 50%;
		/* center of the SVG content box */
		animation: spin 10s linear infinite;
		will-change: transform;
	}
	
	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
	
	@media (prefers-reduced-motion: reduce) {
		.mark_rotor {
			animation: none;
		}
	}
</style>