JSFiddle - React, Tailwind, and code Playground

by Werner Potgieter

HTML

<div>
<div class="bigLogo">
							<div class="blobs">
								<div class="blob"></div>
								<div class="blob"></div>
								<div class="blob"></div>
								<div class="connect12">
									<div class="part1"></div>
									<div class="part2"></div>
									<div class="part3"></div>
								</div>
								<div class="connect23">
									<div class="part3"></div>
								</div>
								<div class="connect31">
									<div class="part3"></div>
								</div>
							</div>

							<svg xmlns="http://www,w3.org" version='1.1'>
								<defs>
									<filter id="goo">
										<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
										<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
																					   0 1 0 0 0
																					   0 0 1 0 0
																					   0 0 0 18 -7" result="goo"/>
										<feBlend in="SourceGraphic" in2="goo" />
									</filter>
								</defs>
							</svg>
						</div>
</div>

<div class="break">
<div class="smallLogo">
		<div class="blobs">
			<div class="blob"></div>
			<div class="blob"></div>
			<div class="blob"></div>
			<div class="connect12">
				<div class="part1"></div>
				<div class="part2"></div>
				<div class="part3"></div>
			</div>
			<div class="connect23">
				<div class="part3"></div>
			</div>
			<div class="connect31">
				<div class="part3"></div>
			</div>
		</div>

		<svg xmlns="http://www,w3.org" version='1.1'>
			<defs>
				<filter id="goo2">
					<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
					<feColorMatrix in="blur" mode="matrix" values="0 0 0 0 0
																   0 0 0 0 0
																   0 0 0 0 0
																   0 0 0 18 -7" result="goo"/>
					<feBlend in="SourceGraphic" in2="goo" />
				</filter>
			</defs>
		</svg>
	</div>
</div>

SCSS

@-webkit-keyframes rotate-logo {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate-logo {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate-logo-small {
	0% {
		-webkit-transform: rotate(0deg) scale(0.3);
		transform: rotate(0deg) scale(0.3);
	}
	100% {
		-webkit-transform: rotate(360deg) scale(0.3);
		transform: rotate(360deg) scale(0.3);
	}
}

@keyframes rotate-logo-small {
	0% {
		-webkit-transform: rotate(0deg) scale(0.3);
		transform: rotate(0deg) scale(0.3);
	}
	100% {
		-webkit-transform: rotate(360deg) scale(0.3);
		transform: rotate(360deg) scale(0.3);
	}
}

@-webkit-keyframes blob-anim-left {
	0% {
		-webkit-transform: translateX(6px) translateY(10px);
		transform: translateX(6px) translateY(10px);
	}
	100% {
		-webkit-transform: translateX(-43px) translateY(25px);
		transform: translateX(-43px) translateY(25px);
	}
}

@keyframes blob-anim-left {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-43px) translateY(25px);
		transform: translateX(-43px) translateY(25px);
	}
}

@-webkit-keyframes blob-anim-right {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(59px) translateY(-61px);
		transform: translateX(59px) translateY(-61px);
	}
}

@keyframes blob-anim-right {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(59px) translateY(-61px);
		transform: translateX(59px) translateY(-61px);
	}
}

@-webkit-keyframes blob-anim-top-right {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(28px) translateY(36px);
		transform: translateX(28px)...