<div class="brand">
	<a href="https://adamgreenough.me/" target="_blank"><img src="https://webwide.io/data/avatars/l/0/1.jpg?1589740763" class="image-circle" alt="Adam Greenough - Web Designer & Developer" /></a>
	<div class="brand-label">
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" aria-hidden="true">
			<defs>
				<path id="a" d="M90 150a60 60 0 01120 0 60 60 0 01-120 0" />
			</defs>
			<use xlink:href="#a" fill="none" /><text>
				<textPath xlink:href="#a"> Adam Greenough &bull; Web Designer &amp; Developer &bull;</textPath>
			</text>
		</svg>
	</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

html,
body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: #eff5ff;
	overflow-x: hidden;
}

.brand {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 40%;
	max-width: 200px;

	img {
		display: block;
		border-radius: 50%;
		width: 100%;
	}

	.brand-label {
		transition: all 0.2s ease-in-out;

		svg {
			position: absolute;
			left: -90%;
			top: -90%;
			height: 280%;
			width: 280%;
			pointer-events: none;

			animation-name: rotate;
			animation-duration: 15s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-play-state: paused;

			text {
				font-family: "Inter", sans-serif;
				font-size: 12px;
				letter-spacing: 1.375px;
				font-variation-settings: "wght" 650;
				fill: #434dad;
				text-transform: uppercase;
			}
		}
	}

	&:hover {
		.brand-label svg {
			animation-play-state: running;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(360deg);
	}
	to {
		transform: rotate(0);
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.