Raep Glitch

index.pug

section.portfolio-experiment
	.title(contenteditable="false") Ræp Records

raep-glitch.markdown

Raep Glitch

A Pen by Phonic Mouse on CodePen.

License.

style.scss

@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');

$font: 'Special Elite', cursive;

.portfolio-experiment {
	background: #121212;
	color: #fffff0;

	$steps: 50;
	.title {
		outline: none;
		font-size: 10vw;
		text-align: center;
		font-family: $font;
		min-height: 10vw;
		max-width: 80vw;
		min-width: 10vw;
		
		&,
		* {
			animation: cray 6s infinite steps($steps);
			display: inline-block;
		}
	}

	@keyframes cray {
		@for $i from 1 to $steps {
			$per: 100% / $steps * $i;
			$weight: (
				100,
				200,
				300,
				400,
				500,
				600,
				700
			);
			$style: (
				normal,
				italic,
				normal,
				normal
			);
			$decor: (
				none,
				none,
				line-through,
				underline,
				none,
				none,
				none
			);
			$trans: (
				none,
				none,
				uppercase,
				lowercase,
				capitalize,
				none,
				none,
				none,
				none,
				none,
				none
			);

			$arrayW: random(7);
			$arrayS: random(4);
			$arrayD: random(7);
			$arrayT: random(11);

			#{$per} {
				font-weight: nth($weight, $arrayW);
				font-style: nth($style, $arrayS);
				text-decoration: nth($decor, $arrayD);
				text-transform: nth($trans, $arrayT);
			}
		}
	}
}

styles

<link href="https://codepen.io/lukemeyrick/pen/YeexWB" rel="stylesheet" />