<div class="container container--1">
	<div class="text-container" data-text="LIGHT" data-text-count="4" data-icon-indexes="1,5">
	</div>
	<div class="text-container shadow-container" data-text="LIGHT" data-text-count="4" data-icon-indexes="1,5">
	</div>
</div>
<div class="container container--2">
	<div class="text-container" data-text="WORK" data-text-count="4" data-icon-indexes="2,4">
	</div>
	<div class="text-container shadow-container" data-text="WORK" data-text-count="4" data-icon-indexes="2,4">
	</div>
</div>


<svg class="icons" style="display: none;">
	<symbol id="star" viewbox="0 0 296.789 296.789">
		<path
				d="m 128.07699,246.6702 16.62278,44.87778 c 0.62488,1.68958 2.24042,2.81007 4.04647,2.81007 1.80605,0 3.42159,-1.12049 4.04646,-2.81007 l 16.62278,-44.87778 c 13.45522,-36.3312 42.2174,-64.97071 78.70166,-78.36601 l 45.06998,-16.55188 c 1.69428,-0.62221 2.81958,-2.23087 2.81958,-4.02922 0,-1.79835 -1.1253,-3.40699 -2.81958,-4.0292 l -45.07253,-16.5519 C 211.63034,113.74417 182.86815,85.107178 169.41548,48.778514 L 152.7927,3.900743 c -0.62487,-1.6870583 -2.24041,-2.8075483 -4.04646,-2.8075483 -1.80605,0 -3.42159,1.12049 -4.04647,2.8075483 L 128.07699,48.778514 C 114.62179,85.107178 85.862143,113.74417 49.375346,127.14199 l -45.0725171,16.5519 c -1.694284,0.62221 -2.819573,2.23085 -2.819573,4.0292 0,1.79835 1.125289,3.40701 2.819573,4.02922 l 45.0699771,16.55188 c 36.486798,13.3953 65.248984,42.03228 78.704184,78.36601 z">
		</path>
	</symbol>
</svg>



<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>
@import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap");

:root {
	--animation-duration: 2400ms;
	--animation-timing-function: ease-in-out;
	--animation-iteration-count: infinite;

	--bg-color: #f378c7;
}

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

body {
	width: 100%;
	height: 100vh;
	background-color: var(--bg-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.icons {
	display: none;
}

.container {
	position: relative;
	width: 400px;
	height: 260px;

	&--1 {
		--delay-offset: -1000ms;
		.text {
			.char-container {
				&:nth-child(1) {
					.icon {
						top: 50%;
						left: 10%;
					}
				}
				&:nth-child(5) {
					.icon {
						top: 15%;
						left: 50%;
					}
				}
			}
		}
	}

	&--2 {
		--delay-offset: -2000ms;
		.text {
			.char-container {
				&:nth-child(2) {
					.icon {
						top: 60%;
						left: 10%;
					}
				}
				&:nth-child(4) {
					.icon {
						top: 75%;
						left: 80%;
					}
				}
			}
		}
	}

	.text-container,
	.shadow-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.text {
		position: absolute;
		top: 50%;
		display: flex;
		font-size: 12rem;
		font-family: "Bebas Neue";
		font-weight: bold;
		letter-spacing: 5px;
		-webkit-text-stroke: 2px #161618;
		user-select: none;
		pointer-events: none;

		.char-container {
			position: relative;
		}
		.icon {
			position: absolute;
			width: 1rem;
			height: 1rem;
			stroke-width: 25px;
			stroke: #161618;
			transform: translate(-50%, -50%);
			animation: scaleUpdown var(--animation-duration) var(--animation-timing-function)
				var(--animation-iteration-count);
			animation-delay: var(--icon-animation-delay);
		}
	}

	.text-container {
		z-index: 1;
		.text {
			.icon {
				fill: #f2f2f2;
			}
			transform: translate(-50%, -50%);
			animation: upDown var(--animation-duration) var(--animation-timing-function)
				var(--animation-iteration-count);
			@for $i from 1 through 4 {
				&:nth-child(#{$i}) {
					left: 45% + $i * 0.5;
					animation-delay: calc(var(--delay-offset) + (0.1s * #{$i}));
					z-index: #{-$i};
				}
			}
		}
	}

	.shadow-container {
		z-index: 0;
		.text {
			-webkit-text-stroke: 0;
			color: #e900a3;
			top: 53%;
			@for $i from 1 through 4 {
				&:nth-child(#{$i}) {
					opacity: 0;
					left: 47% + $i * 0.5;
					transform: translate(-50%, -50%);
					// z-index: #{- ($i + 7)};
				}
			}
			.icon {
				fill: #e900a3;
				stroke-width: 0;
			}
		}
	}
}

@keyframes upDown {
	0%,
	100% {
		opacity: 1;
		transform: translate(-50%, -70%);
	}
	50% {
		transform: translate(-50%, -30%);
	}
}
@keyframes scaleUpdown {
	0% {
		transform: translate(-50%, -50%) scale(1) rotate(0);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.5) rotate(90deg);
	}
	100% {
		transform: translate(-50%, -50%) scale(1) rotate(180deg);
	}
}


.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a{
		margin: 0 10px;
		color: #f2f2f2;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover{
			transform: scale(1.1);
		}
	}

}
View Compiled
console.clear();

const textContainers = document.querySelectorAll(".text-container");
const colorArr = ["#fdfdfa", "#7900CD", "#E6007B", "#F0FE09"];

textContainers.forEach((textContainer) => {
	const delay = 200; // in millisecond
	const totalTextCount = textContainer.getAttribute("data-text-count");
	const elText = textContainer.getAttribute("data-text");
	const iconIndexes = textContainer
	.getAttribute("data-icon-indexes")
	.split(",")
	.map((n) => n - 1);

	for (let i = 0; i < totalTextCount; i++) {
		let textEl = document.createElement("span");
		textEl.className = "text";
		for (let j = 0; j < elText.length; j++) {
			let charContainerEl = document.createElement("span");
			charContainerEl.className = "char-container";
			let charEl = document.createElement("span");
			charEl.className = "char";
			charEl.setAttribute("style", `--delay: ${delay - i * 100}ms`);
			charEl.innerHTML = elText[j];
			charContainerEl.append(charEl);
			textEl.append(charContainerEl);

			iconIndexes.forEach((iconIndex) => {
				if (i == 0 && j == iconIndex) {
					let iconContainierEl = document.createElement("span");
					iconContainierEl.classList.add("icon-container");
					let SVGEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
					SVGEl.classList.add("icon", "star");
					let SVGUseEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
					SVGUseEl.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#star");
					SVGEl.setAttribute(
						"style",
						`--icon-animation-delay: ${Math.random() * i * 200}ms`
					);

					SVGEl.appendChild(SVGUseEl);
					iconContainierEl.appendChild(SVGEl);
					charContainerEl.appendChild(iconContainierEl);
				}
			});
		}
		textContainer.append(textEl);
	}

	const textArr = textContainer.querySelectorAll(".text");
	if (!textContainer.classList.contains("shadow-container")) {
		textArr.forEach((text, index) => {
			text.style.color = colorArr[index];
		});
	}
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css
  2. https://fonts.googleapis.com/css?family=Bebas+Neue&amp;display=swap

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js