h1.rgb-text Hello There This is RGB Text
View Compiled
@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text')

body
	background: black

.rgb-text
	position: absolute
	top: 50%
	left: 50%
	font-family: "Libre Barcode 39 Text"
	font-size: 4em
	text-align: center
	color: white
	transform: translateX(-50%) translateY(-50%)
	
View Compiled
window.onload = () => {
	let rgbText, nodes, hues;
	
	rgbText = document.querySelector(".rgb-text");

	rgbText.innerHTML = [].slice
		.call(rgbText.innerHTML)
		.map(c => `<span>${c}</span>`)
		.join("");

	nodes = document.querySelectorAll(".rgb-text span");
	hues = [];

	nodes.forEach((c, i) => {
		hues.push(Math.round(i * (360 / nodes.length)));
	});
	
	(function loop() {
		hues.forEach((h, i, _this) => {
			_this[i]--;
			nodes[i].style.color = `hsl(${_this[i]},100%,50%)`;
		});
		window.requestAnimationFrame(loop);
	})();
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.