JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<h1 aria-label="phloe industries">
	<svg viewBox="0 0 258 30">
		<defs>
			<path id="p" d="M0 7 a1 1 0 0 1 1 -1 h9 a8 8 0 0 1 8 8 v2 a8 8 0 0 1 -8 8 h-3 a1 1 0 0 0 -1 1 v4 a 1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1z m6 10 a1 1 0 0 0 1 1 h 3 a2 2 0 0 0 2 -2 v-2 a2 2 0 0 0 -2 -2 h-3 a1 1 0 0 0 -1 1" />
			<path id="h" d="M0 1 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v4 a1 1 0 0 0 1 1 h3 a8 8 0 0 1 8 8 v9 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1 v-9 a2 2 0 0 0 -2 -2 h-3 a1 1 0 0 0 -1 1 v10 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1" />
			<path id="l" d="M0 1 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v22 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1" />
			<path id="o" d="M0 14 a8 8 0 0 1 8 -8 h2 a8 8 0 0 1 8 8 v2 a8 8 0 0 1 -8 8 h-2 a8 8 0 0 1 -8 -8z m6 2 a2 2 0 0 0 2 2 h2 a2 2 0 0 0 2 -2 v-2 a2 2 0 0 0 -2 -2 h-2 a2 2 0 0 0 -2 2" />
			<path id="e" d="M0 14 a8 8 0 0 1 8 -8 h2 a8 8 0 0 1 8 8 v3 a1 1 0 0 1 -1 1 h-3 a2 2 0 0 0 -2 2 v3 a1 1 0 0 1 -1 1 h-3 a8 8 0 0 1 -8 -8z m6 2 a2 2 0 0 0 2 2 h2 a2 2 0 0 0 2 -2 v-2 a2 2 0 0 0 -2 -2 h-2 a2 2 0 0 0 -2 2" />
			<path id="." d="M0 19 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v4 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1z" />
			<path id="i" d="M0 1 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v4 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1z m0 12 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v10 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1" />
			<path id="n" d="M0 7 a1 1 0 0 1 1 -1 h9 a8 8 0 0 1 8 8 v9 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1 v-9 a2 2 0 0 0 -2 -2 h-3 a1 1 0 0 0 -1 1 v10 a1 1 0 0 1 -1 1 h-4 a1 1 0 0 1 -1 -1" />
			<path id="d" d="M0 14 a8 8 0 0 1 8 -8 h3 a1 1 0 0 0 1 -1 v-4 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v22 a1 1 0 0 1 -1 1 h-9 a8 8 0 0 1 -8 -8z m6 2 a2 2 0 0 0 2 2 h3 a1 1 0 0 0 1 -1 v-4 a1 1 0 0 0 -1 -1 h-3 a2 2 0 0 0 -2 2" />
			<path id="u" d="M0 7 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v9 a2 2 0 0 0 2 2 h3 a1 1 0 0 0 1 -1 v-10 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v16 a1 1 0 0 1 -1 1 h-9 a8 8 0 0 1 -8 -8" />
			<path id="s" d="M0 19 a1 1 0 0 1 1 -1 h3 a2 2 0 0 0 2 -2 v-2 a8 8 0 0 1 8 -8 h3 a1 1 0 0 1 1...

CSS

html {
	height: 100%;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	background: hsl(0, 80%, 50%) repeating-linear-gradient(-45deg, transparent, transparent 6px, hsla(0, 100%, 0%, .025) 6px, hsla(0, 100%, 0%, .025) 7px);
	animation: 120s cycle infinite;
	margin: 0;
}

h1 {
	width: 50vw;
}

@keyframes cycle {
	0 {
		background-color: hsl(0, 80%, 50%);
	}
	16.6666666% {
		background-color: hsl(60, 80%, 50%);
	}
	33.3333333% {
		background-color: hsl(120, 80%, 50%);
	}
	50% {
		background-color: hsl(180, 80%, 50%);
	}
	66.6666666% {
		background-color: hsl(240, 80%, 50%);
	}
	83.3333333% {
		background-color: hsl(300, 80%, 50%);
	}
	100% {
		background-color: hsl(360, 80%, 50%);
	}
}