Hot Ones Animation

hot-ones-animation.markdown

Hot Ones Animation

That's a homage to my favorite YouTube channel, First We Feast, that is responsible for THE GREATEST INTERVIEW SHOW OF ALL TIME Hot Ones.

A Pen by Ryan Monteiro on CodePen.

License.

index.html

<div class="container">
	<svg viewBox="0 0 214.12 195.75" style="filter: url(#glow);">
		<g id="Layer_2" data-name="Layer 2">
			<defs>
				<filter id="glow">
					<fegaussianblur class="blur" result="coloredBlur" stddeviation="4"></fegaussianblur>
					<femerge>
						<femergenode in="coloredBlur"></femergenode>
						<!--           <femergenode in="coloredBlur"></femergenode> -->
						<!--           <femergenode in="coloredBlur"></femergenode> -->
						<femergenode in="SourceGraphic"></femergenode>
					</femerge>
				</filter>
			</defs>
			<g id="Layer_1-2" data-name="Layer 1">
				<g id="Hot">
					<polyline class="cls-1" points="189.13 51.18 188.18 67.18 175.97 67.18 175.97 116.83 157.6 116.83 157.6 67.18 144.57 67.18 145.51 51.18 183.2 51.18" />
					<path class="cls-1" d="M138.4,70.73a32.42,32.42,0,0,1,2.26,12.21,34.08,34.08,0,1,1-68.15,0,32.74,32.74,0,0,1,3.56-15" />
					<path class="cls-1" d="M65.05,57.93v59.14H47V92.18H34.71v24.89H16.46V51.18H34.71V77.13H47.15V51.18h18" />
				</g>
				<g id="Ones">
					<path class="cls-1" d="M31,126.43c7.47.6,13.16,3.2,16.48,8.3,4,5.69,6,14.22,6,26s-2,20.27-6,25.48-10.67,7.94-20,7.94-15.88-2.6-19.91-7.7-5.93-13.63-5.93-25.48,2-20.38,6.16-26.07a21,21,0,0,1,17-8.53m-.12,15.76a3.89,3.89,0,0,0-3.2,2.72c-.83,2.26-1.54,6.64-1.54,13.16v2.61c0,6.87.6,11.37,1.66,13.51s3.08,3.08,6.16,3.08,5.1-.95,6-3,1.54-6.4,1.54-12.68v-3.2c0-6.51-.59-10.9-1.66-13.27a4.86,4.86,0,0,0-3-2.73" />
					<path class="cls-1" d="M108,133.31V192.8H90.64L77,162.22h-.83V192.8H60.07m0,.12V127.26H78l13,31.53h.83V127.26H108" />
					<path class="cls-1" d="M151.56,133.31l-.71,10.43H133.43v9.71h15v14H133.31v10.9H151.8l-1,14.93H115.29V127.62m0-.12H151.8" />
					<path class="cls-1" d="M196.59,134.26l-1.66,10.9c-7-1.66-11.73-2.49-14.34-2.49-3.2,0-5,1.3-5,4,0,1,.83,2,2.49,3s3.55,2,5.8,3.08,4.51,2.49,6.76,3.91a20.9,20.9,0,0,1,5.8,6.52,18.85,18.85,0,0,1,2.49,9.72c0,6.76-1.89,12-5.33,15.53-3.67,3.67-8.65,5.45-15.29,5.45a62,62,0,0,1-19.32-3l1.14-15.15,0-.31c7.47,2.13,12.59,3.14,15.44,3.14s4.5-1.3,4.5-3.91a4.86,4.86,0,0,0-2.25-3.79,29.16,29.16,0,0,0-5.81-3.2q-3.37-1.78-6.75-3.91a19.89,19.89,0,0,1-8.3-16.71c0-6.4,1.9-11.38,5.45-15.17,3.79-3.8,8.65-5.81,15.17-5.81A102.54,102.54,0,0,1,197.3,128" />
				</g>
				<g id="Chicken">
					<path class="cls-2" d="M90.53,105.22c.71-5.1,1.65-13-1-21-5-15.64,0-26.9,11.37-29.62,4.86-1.19,9.37-1.19,13,1.66a11.52,11.52,0,0,1,2,2.48" />
					<path class="cls-2" d="M128.21,98.94c-2.84-2.49-7.23-8.53-8.41-14.22-1-5.69-.83-7.23-.36-9.36" />
					<path class="cls-3" d="M126.32,76.9s-.12,2.25.71,3.2a4.08,4.08,0,0,1,.83,3,1.75,1.75,0,0,1-2.61,1" />
					<line class="cls-1 fire-on" x1="100.48" y1="66.82" x2="109.37" y2="72.04" />
					<line class="cls-1 fire-on" x1="102.38" y1="73.82" x2="107.47" y2="64.93" />
					<circle class="cls-1 fire-off" cx="104.92" cy="69.37" r="5.17" />
					<path class="cls-3" d="M88.39,56a5.75,5.75,0,0,1-1.3-7.7C89.81,43.59,96,47.15,96,47.15s0-5.69,5.33-5.69,6.87,6.4,6.87,6.4" />
					<path id="rosa-1" class="cls-3 fire-off" d="M83.18,63.62A4.67,4.67,0,0,1,78.32,60c-.59-2.49,1-3.91,2.49-4.74" />
					<path id="rosa-2" class="cls-3 fire-on" d="M113.11,44.72A4.68,4.68,0,0,1,119,46.29c1.48,2.08.59,4-.52,5.33" />
					<path class="cls-1 beak" d="M116.36,60S121.81,56,127,57.11l-4.74,7" />
					<line class="cls-1 beak" x1="122.88" y1="70.73" x2="131.77" y2="72.39" />
					<path class="cls-3 fire-on" d="M133.54,66.82s3.56-2.49,6.52-2.72" />
					<path id="fogo" class="cls-3 fire-on" d="M192.56,46.44a15.57,15.57,0,0,1,2.14-3.91c3.08-4.86,6-5.69,12.09-15a83.67,83.67,0,0,0,5.68-11.26s-1.54,1.89-6.63,5.45a36.72,36.72,0,0,1-10.43,5c2.84-4.39,1.89-3.08,7-10.55C206.07,11,207.73,5,207.5,1.64c-7.71,9.6-8.3,8.77-13.63,13.16a46.72,46.72,0,0,1-12.45,7s2-3.68,3.56-6.87,1.54-6.52,1.54-9.37C179.76,18,174.31,17.29,168.15,22s-8.53,7.34-9.72,9.36c-2.84,4.38-2,2.72-4.5,5.69,1.18-5.69.71-7.71.71-7.71a25.81,25.81,0,0,0-.71-7.34,68,68,0,0,1-5,12c-2.49,4.85-3.91,7.22-7.94,14.1a57.15,57.15,0,0,1-10.55,14.22" />
				</g>
			</g>
		</g>
	</svg>
</div>

script.js

let fireOn = document.querySelectorAll('.fire-on');
let fireOff = document.querySelectorAll('.fire-off');

const stdDeviation = document.querySelector('feGaussianBlur');

let isOn = true;

firedUp(isOn);

setInterval(() => {
	toggleCrisp();
}, 1000);

function toggleCrisp () {
	isOn = !isOn;
	firedUp(isOn);
}

function firedUp (isOn) {
	if (isOn) {
		fireOff.forEach(d => d.style.display = 'block');
		fireOn.forEach(d => d.style.display = 'none');
	} else {
		fireOff.forEach(d => d.style.display = 'none');
		fireOn.forEach(d => d.style.display = 'block');
	}
};

style.scss

:root {
	--yellow: #ffce00;
	--white: #fff;
	--red: #e4332f;
}

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

body {
	background: black;
}

.cls-1,.cls-2,.cls-3 {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3.28px;
}

.cls-1 {
	stroke: var(--yellow);
}

.cls-2 {
	stroke: var(--white);
}

.cls-3 {
	stroke: var(--red);
}

.container {
	width: 100vw;
	height: 100vh;

	display: grid;
	place-content: center;
}

svg {
	place-self: center center;
	width: 100%;
	max-width: 1000px;
}