Animated Text Circle

animated-text-circle.markdown

Animated Text Circle

A Pen by Pedro André on CodePen.

License.

index.html

<!--
on YT: https://youtu.be/zwl3kZPZ8H8
-->

<div class="circle">
	<div class="logo"></div>
	<div class="text">
		<p>
			Some text - Animated circle text -
		</p>
	</div>
</div>

script.js

/*
on YT: https://youtu.be/zwl3kZPZ8H8
*/

const text = document.querySelector(".text");
text.innerHTML = text.innerText
	.split("")
	.map(
		(char, i) => `<span style="transform:rotate(${i * 10.3}deg)">${char}</span>`
	)
	.join("");

style.css

/*
on YT: https://youtu.be/zwl3kZPZ8H8
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #fff;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.circle {
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo {
	position: absolute;
	width: 140px;
	height: 140px;
	background: url("https://assets.codepen.io/7344750/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1657025755&width=512");
	background-size: cover;
	border-radius: 100vmax;
	background-position: center;
}

.text {
	position: absolute;
	width: 100%;
	height: 100%;
	font-family: consolas;
	color: #000;
	font-size: 17px;
	animation: textRotation 8s linear infinite;
}

@keyframes textRotation {
	to {
		transform: rotate(360deg);
	}
}

.text span {
	position: absolute;
	left: 50%;
	font-size: 1.2em;
	transform-origin: 0 100px;
}