SpongeBob in Pure CSS

index.html

<div class="container">
	<h1>SpongeBob in Pure CSS</h1>
	<div class="bob">
		<div class="sponge">
			<div class="top">
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
			</div>
			<div class="left">
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
			</div>
			<div class="right">
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
			</div>
			<div class="bottom">
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
				<div class="waves"></div>
			</div>
			<div class="shape"></div>
			<div class="blobs">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="nose"></div>
			<div class="eyelash right">
				<div class="lash"></div>
				<div class="lash"></div>
				<div class="lash"></div>
			</div>
			<div class="eye right">
				<div class="pupil">
					<div class="dot"></div>
				</div>
			</div>
			<div class="eyelash left">
				<div class="lash"></div>
				<div class="lash"></div>
				<div class="lash"></div>
			</div>
			<div class="eye left">
				<div class="pupil">
					<div class="dot"></div>
				</div>
			</div>
			<div class="cheek left">
				<div class="freckle"></div>
				<div class="freckle"></div>
				<div class="freckle"></div>
			</div>
			<div class="cheek right">
				<div class="freckle"></div>
				<div class="freckle"></div>
				<div class="freckle"></div>
			</div>
			<div class="dimple left"></div>
			<div class="dimple right"></div>
			<div class="mouth">
				<div class="tooth left"></div>
				<div class="tooth right"></div>
			</div>
			<div class="chin left"></div>
			<div class="chin right"></div>
		</div>
		<div class="bottom">
			<div class="collar left"></div>
			<div class="collar right"></div>
			<div class="sleeve left"></div>
			<div class="sleeve right"></div>
			<div class="arm left"></div>
			<div class="arm right"></div>
			<div class="hand left">
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="finger"></div>
			</div>
			<div class="hand right">
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="finger"></div>
			</div>
			<div class="pantsleg left"></div>
			<div class="pantsleg right"></div>
			<div class="leg left">
				<div class="sock"></div>
			</div>
			<div class="leg right">
				<div class="sock"></div>
			</div>
			<div class="foot left">
				<div class="shoe"></div>
			</div>
			<div class="foot right">
				<div class="shoe"></div>
			</div>
			<div class="border left"></div>
			<div class="border right"></div>
			<div class="border bottom"></div>
			<div class="pants">
				<div class="border"></div>
				<div class="belt"></div>
			</div>
			<div class="tie-knot"></div>
			<div class="tie-long"></div>
		</div>
	</div>
</div>

SpongeBob in Pure CSS.markdown

SpongeBob in Pure CSS

Spongebob is made with CSS3 shapes and HTML.

A Pen by Rachel Bull on CodePen.

License.

style.css

.container {
	max-width: 800px;
	margin: 15px auto;
	padding: 0 20px;
	height: 500px;
	box-sizing: border-box;

	h1 {
		font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
		font-weight: 100;
		letter-spacing: 0.5px;
		color: #666666;
		font-size: 40px;
		text-align: center;
	}
}

$body-color: #FEF46E;
$shape-width: 150px;
$shape-height: 150px;
$shape-angle: 15px;
$shape-outer-width: $shape-width + ($shape-angle * 2);

.bob {
	position: absolute;
	left: 50%;
	margin-left: -($shape-outer-width / 2);
	width: $shape-outer-width;
	height: 200px;
	
	$top-border: 2px;
	
	@mixin rotate($deg) {
		-ms-transform: rotate($deg);
		-webkit-transform: rotate($deg);
		transform: rotate($deg);
	}

	$wave-width: 15px;
	$wave-height: $wave-width / 5;
	$wave-pair-width: $wave-width * 2;
	$wave-radius: 20px;

	.sponge {
		position: relative;
		height: $shape-height;
		width: $shape-outer-width;
		z-index: 20;

		.shape {
			border-top: $shape-height solid $body-color;
			border-left: $shape-angle solid transparent;
			border-right: $shape-angle solid transparent;
			height: 0;
			width: $shape-width;
			z-index: -1px;
		}
		
		.blobs span {
			position: absolute;
			width: 15px;
			height: 20px;
			background: #C5C75A;
			border-radius: 50%;
			
			&:nth-of-type(1) {
				top: 10px;
				left: 22px;
				@include rotate(20deg);
			}
			
			&:nth-of-type(2) {
				height: 10px;
				width: 8px;
				top: 30px;
				left: 14px;
				@include rotate(20deg);
			}
			
			&:nth-of-type(3) {
				bottom: 25px;
				left: 20px;
				@include rotate(-20deg);
			}
			
			&:nth-of-type(4) {
				height: 10px;
				width: 8px;
				bottom: 15px;
				left: 37px;
				@include rotate(-20deg);
			}
			
			&:nth-of-type(5) {
				bottom: 10px;
				right: 30px;
				@include rotate(-140deg);
			}
			
			&:nth-of-type(6) {
				height: 10px;
				width: 8px;
				bottom: 30px;
				right: 20px;
				@include rotate(-140deg);
			}
			
			&:nth-of-type(7) {
				top: 12px;
				right: 15px;
				@include rotate(-140deg);
			}
		}

		> .top .waves, > .left .waves, > .bottom .waves, > .right .waves {
			position: absolute;
			width: $wave-pair-width;

			&:before {
				content: "";
				position: absolute;
				height: $wave-height;
				width: $wave-width;
				border-top: $top-border solid #B1B14C;
				background: $body-color;
				top: -$wave-height;
				border-radius: $wave-radius;
				border-radius: $wave-radius $wave-radius 0 0;
				-moz-border-radius: $wave-radius $wave-radius 0 0;
				-webkit-border-radius: $wave-radius $wave-radius 0 0;
			}

			&:after {
				content: "";
				position: absolute;
				height: $wave-height;
				width: $wave-width;
				border-bottom: $top-border solid #B1B14C;
				background: white;
				top: -1px;
				right: 0;
				border-radius: $wave-radius;
				border-radius: 0 0 $wave-radius $wave-radius;
				-moz-border-radius: 0 0 $wave-radius $wave-radius;
				-webkit-border-radius: 0 0 $wave-radius $wave-radius;
			}
		}

		> .top .waves {
			top: 0;
			left: 0;

			&:nth-of-type(2) { left: $wave-pair-width; }
			&:nth-of-type(3) { left: $wave-pair-width * 2; }
			&:nth-of-type(4) { left: $wave-pair-width * 3; }
			&:nth-of-type(5) { left: $wave-pair-width * 4; }
			&:nth-of-type(6) { left: $wave-pair-width * 5; }
		}

		> .left .waves {
			left: -$wave-width + 1px;
			top: $wave-width;
			@include rotate(-95deg);

			&:nth-of-type(2) { top: $wave-width + $wave-pair-width;
									left: -$wave-width + 4px; }
			&:nth-of-type(3) { top: $wave-width + ($wave-pair-width * 2);
									left: -$wave-width + 4px + 3px; }
			&:nth-of-type(4) { top: $wave-width + ($wave-pair-width * 3);
									left: -$wave-width + 4px + 3px + 3px; }
			&:nth-of-type(5) { top: $wave-width + ($wave-pair-width * 4);
									left: -$wave-width + 4px + 3px + 3px + 3px; }
		}

		> .right .waves {
			right: -$wave-width + 1px;
			top: $wave-width;
			@include rotate(95deg);

			&:nth-of-type(2) { top: $wave-width + $wave-pair-width;
									right: -$wave-width + 4px; }
			&:nth-of-type(3) { top: $wave-width + ($wave-pair-width * 2);
									right: -$wave-width + 4px + 3px; }
			&:nth-of-type(4) { top: $wave-width + ($wave-pair-width * 3);
									right: -$wave-width + 4px + 3px + 3px; }
			&:nth-of-type(5) { top: $wave-width + ($wave-pair-width * 4);
									right: -$wave-width + 4px + 3px + 3px + 3px; }
		}

		$bottom-left: 15px;

		> .bottom .waves {
			left: $bottom-left;
			bottom: 0;
			@include rotate(180deg);

			&:nth-of-type(3):after {
				background: $body-color;
			}
			
			&:nth-of-type(2) { left: $bottom-left + $wave-pair-width; }
			&:nth-of-type(3) { left: $bottom-left + ($wave-pair-width * 2); }
			&:nth-of-type(4) { left: $bottom-left + ($wave-pair-width * 3); }
			&:nth-of-type(5) { left: $bottom-left + ($wave-pair-width * 4); }
		}
		
		.eyelash {
			position: absolute;
			top: 22px;
			
			$eyelash-position: 46px;
			
			&.left {
				left: $eyelash-position;
			}
			
			&.right {
				right: $eyelash-position;
			}
			
			.lash {
				height: 9px;
				width: 3px;
				background: black;
				margin-right: 9px;
				float: left;
				border-radius: 50%;
				
				&:nth-of-type(1) {
					@include rotate(-15deg);
					margin-top: 2px;
				}
				
				&:nth-of-type(2) {
					@include rotate(0deg);
				}
				
				&:nth-of-type(3) {
					@include rotate(15deg);
					margin-top: 2px;
					margin-right: 0;
				}
			}
		}
		
		.eye {
			position: absolute;
			top: 30px;
			height: 55px;
			width: 58px;
			background: white;
			border: $top-border solid black;
			border-radius: 50%;
			
			$eye-position: 30px;
			$pupil-position: 45%;
			
			&.left {
				left: $eye-position;
				
				.pupil {
					left: $pupil-position;
				}
			}
			
			&.right {
				right: $eye-position;
				
				.pupil {
					right: $pupil-position;
				}
			}
			
			$pupil-size: 17px;
			
			.pupil {
				position: absolute;
				top: 50%;
				margin-top: -($pupil-size / 2);
				height: $pupil-size;
				width: $pupil-size;
				background: #69CDDC;
				border: $top-border solid black;
				border-radius: 50%;
				
				$dot-size: 8px;
				
				.dot {
					position: absolute;
					height: $dot-size;
					width: $dot-size;
					background: black;
					top: 50%;
					margin-top: -($dot-size / 2);
					left: 50%;
					margin-left: -($dot-size / 2);
					border-radius: 50%;
				}
			}
		}
		
		.nose {
			position: absolute;
			top: 67px;
			left: 79px;
			height: 22px;
			width: 18px;
			background: $body-color;
			border-top: $top-border solid black;
			border-left: $top-border solid black;
			border-right: $top-border solid black;
			border-bottom: $top-border solid transparent;
			border-radius: 50%;
			z-index: 10;
		}
		
		.cheek {
			position: absolute;
			top: 47%;
			height: 16px;
			width: 22px;
			border-top: $top-border solid #E64B39;
			border-left: $top-border solid #E64B39;
			border-right: $top-border solid #E64B39;
			border-radius: 50%;
			border-bottom: $top-border solid transparent;
			background: $body-color;
			z-index: 6;
			
			$cheek-position: 20px;
			$cheek-rotate: 20deg;
			
			&.left {
				left: $cheek-position;
				@include rotate(-$cheek-rotate);
			}
			
			&.right {
				right: $cheek-position;
				@include rotate($cheek-rotate);
			}
			
			.freckle {
				height: 2px;
				width: 2px;
				float: left;
				margin-right: 3px;
				background: #E64B39;
				border-radius: 50%;
				margin-top: 3px;
				
				&:nth-of-type(1) {
					margin-top: 5px;
					margin-left: 5px;
				}
				
				&:nth-of-type(3) {
					margin-top: 5px;
					margin-right: 0;
				}
			}
		}
		
		.dimple {
			position: absolute;
			top: 83px;
			width: 8px;
			height: 12px;
			border-top: $top-border solid black;
			border-left: $top-border solid transparent;
			border-right: $top-border solid transparent;
			border-radius: 50%;
			z-index: 8;

			$dimple-position: 30px;
			$dimple-rotate: 30deg;

			&.left {
				left: $dimple-position;
				@include rotate(-$dimple-rotate);
			}

			&.right {
				right: $dimple-position;
				@include rotate($dimple-rotate);
			}
		}
		
		$mouth-width: 160px;
		
		.mouth {
			position: absolute;
			bottom: 38px;
			left: 50%;
			margin-left: -($mouth-width / 2 + 2);
			width: $mouth-width;
			height: 180px;
			border-bottom: $top-border solid black;
			border-left: $top-border solid transparent;
			border-right: $top-border solid transparent;
			border-radius: 50%;
			z-index: 7;
			
			.tooth {
				position: absolute;
				bottom: -15px;
				height: 10px;
				width: 12px;
				border-left: $top-border solid black;
				border-right: $top-border solid black;
				border-bottom: $top-border solid black;
				border-top: $top-border solid transparent;
				background: white;
				border-radius: 0 0 30% 30%;
				
				$tooth-position: 38%;
				$tooth-rotate: 6deg;
				
				&.left {
					left: $tooth-position;
					@include rotate($tooth-rotate);
				}
				
				&.right {
					right: $tooth-position;
					@include rotate(-$tooth-rotate);
				}
			}
		}
		
		$chin-width: 25px;
		
		.chin {
			position: absolute;
			bottom: 15px;
			left: 50%;
			width: $chin-width;
			height: 10px;
			border-bottom: $top-border solid #ED914A;
			border-left: $top-border solid transparent;
			border-right: $top-border solid transparent;
			border-radius: 50%;
			margin-left: -$chin-width;
			
			&.right {
				left: 63%;
			}
		}
	}
	
	$bottom-height: 50px;
	$bottom-angle: 6px;
	$bottom-angle-deg: 6deg;
	$bottom-border: 2px;
	
	> .bottom {
		width: $shape-width - ($bottom-angle + ($wave-height * 2));
		height: $bottom-height;
		position: relative;
		margin-top: -($wave-height * 2);
		margin-left: $shape-angle + ($wave-height * 2);
		background: whitesmoke;
		border-top: $bottom-border solid black;
		z-index: 10;
		
		.border {
			position: absolute;
			z-index: 2;
			
			&.left, &.right {
				height: $bottom-height;
				width: 20px;
				background: white;
				top: 0;
			}
			
			&.left {
				border-left: $bottom-border solid black;
				left: -$bottom-border;
				@include rotate(-$bottom-angle-deg);
			}
			
			&.right {
				border-right: $bottom-border solid black;
				right: -$bottom-border;
				@include rotate($bottom-angle-deg);
			}
			
			&.bottom {
				bottom: -$bottom-border;
				left: 0;
				width: $shape-width - ($bottom-angle + ($wave-height * 2));
				border-bottom: $bottom-border solid black;
			}
		}
		
		.collar {
			position: absolute;
			top: -12px;
			height: 20px;
			width: 30px;
			border: $bottom-border solid black;
			z-index: 5;
			
			$colar-position: 30px;
			$colar-rotate: 30deg;
			
			&.left {
				left: $colar-position;
				border-radius: 20% 20% 20% 60%;
				@include rotate($colar-rotate);
			}
			
			&.right {
				right: $colar-position;
				border-radius: 20% 20% 60% 20%;
				@include rotate(-$colar-rotate);
			}
		}
		
		.sleeve {
			position: absolute;
			top: -20px;
			height: 30px;
			width: 20px;
			border: $bottom-border solid black;
			background: white;
			border-radius: 80% 80% 40% 40%;
			z-index: 1;
			
			$sleeve-rotate: 8deg;
			$sleeve-position: -15px;
			
			&.left {
				left: $sleeve-position;
				@include rotate($sleeve-rotate);
			}
			
			&.right {
				right: $sleeve-position;
				@include rotate(-$sleeve-rotate);
			}
		}

		.arm {
			position: absolute;
			top: 10px;
			height: 45px;
			width: 5px;
			background: $body-color;
			border-left: $bottom-border solid black;
			border-right: $bottom-border solid black;
			z-index: 0;
			
			$arm-position: -8px;
			
			&.left {
				left: $arm-position;
				@include rotate(-$bottom-angle-deg);
			}
			
			&.right {
				right: $arm-position;
				@include rotate($bottom-angle-deg);
			}
		}
		
		.hand {
			position: absolute;
			top: 51px; 
			background: $body-color;
			height: 16px;
			width: 12px;
			border-radius: 30px;
			border: $bottom-border solid black;
			z-index: -1;
			
			$hand-position: -7px;
			$finger-rotate: 10deg;
			
			&.left {
				left: $hand-position;
				
				.finger {
					@include rotate(-$finger-rotate);
					
					&:nth-of-type(1) {
						left: 6px;
						@include rotate(-($finger-rotate + 10));
					}
					
					&:nth-of-type(2) {
						left: 3px;
						@include rotate(-($finger-rotate + 5));
					}
					
					&:nth-of-type(3) {
						left: -1px;
					}
				}
			}
			
			&.right {
				right: $hand-position;
				
				.finger {
					@include rotate($finger-rotate);
					
					&:nth-of-type(1) {
						right: 6px;
						@include rotate(($finger-rotate + 10));
					}
					
					&:nth-of-type(2) {
						right: 3px;
						@include rotate(($finger-rotate + 5));
					}
					
					&:nth-of-type(3) {
						right: -1px;
					}
				}
			}
			
			.finger {
				position: absolute;
				top: 6px;
				height: 15px;
				width: 3px;
				border-bottom: $bottom-border solid black;
				border-left: $bottom-border solid black;
				border-right: $bottom-border solid black;
				border-top: $bottom-border solid transparent;
				border-radius: 0 0 20px 20px;
				background: $body-color;
					
				&:nth-of-type(1) {
					top: 3px;
					height: 13px;
				}

				&:nth-of-type(2) {
					top: 5px;
				}

				&:nth-of-type(3) {
					height: 13px;
				}
			}
		}
		
		$tie-width: 10px;
		$knot-width: 10px;
		$knot-border: 2px;
		$knot-total-width: $knot-width + ($knot-border * 2);
		
		.tie-knot {	
			border-top: 10px solid red;
			border-left: $knot-border solid transparent;
			border-right: $knot-border solid transparent;
			height: 0;
			width: $knot-width;
			position: absolute;
			left: 50%;
			top: 5px;
			margin-left: -($knot-total-width / 2);
			z-index: 11;
			
			&:before {
				position: absolute;
				content: "";
				width: 100%;
				border-bottom: $bottom-border solid black;
			}
		}	

		.tie-long {
			$tie-height: 30px;
			
			position: relative;
			top: -8px;
			left: 50%;
			margin-left: -$tie-width;
			width: 0;
			height: 0;
			border: $tie-width solid transparent;
			border-bottom: $tie-height solid red;
			z-index: 10;

			&:before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border: $tie-width solid transparent;
				border-top: 10px solid red;
				top: $tie-height;
				left: -$tie-width;
			}
		}
		
		.pantsleg {
			position: absolute;
			bottom: -12px;
			height: 20px;
			width: 20px;
			background: #C96936;
			border: $bottom-border solid black;
			border-radius: 80% / 30%;
			
			$pantsleg-position: 30px;
			
			&.left {
				left: $pantsleg-position;
			}
			
			&.right {
				right: $pantsleg-position;
			}
		}
		
		.pants {
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: ($bottom-height / 2) solid #C96936;
			border-left: ($bottom-angle / 2) solid transparent;
			border-right: ($bottom-angle / 2) solid transparent;
			height: 0;
			width: calc(100% - #{$bottom-angle});
			z-index: 3;
			
			.border {
				position: absolute;
				top: -($bottom-height / 2);
				left: -($bottom-angle / 2);
				width: calc(100% + #{$bottom-angle});
				border-top: $bottom-border solid black;
				height: 10px;
			}
			
			.belt {
				position: absolute;
				top: -($bottom-height / 2);
				left: 0;
				width: calc(100% - 10px);
				border-top: 6px dashed black;
				margin: 5px 5px;
				height: 10px;
			}
		}
		
		.leg {
			position: absolute;
			bottom: -50px;
			height: 45px;
			width: 5px;
			background: $body-color;
			border-left: $bottom-border solid black;
			border-right: $bottom-border solid black;
			z-index: -1;
			
			$leg-position: 37px;
			
			&.left {
				left: $leg-position;
			}
			
			&.right {
				right: $leg-position;
			}
			
			.sock {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 50%;
				background: white;
				border-top: $bottom-border solid black;
				
				&:before,
				&:after {
					content: "";
					position: absolute;
					width: 100%;
					height: 3px;
				}
				
				&:before {
					background: #B6EBF1;
					top: 15%;
				}
				
				&:after {
					top: 35%;
					background: #E4473F;
				}
			}
		}
		
		.foot {
			position: absolute;
			bottom: -65px;
			width: 20px;
			height: 18px;
			background: black;
			border-radius: 20px;
				
			&:after /* Shine */ {
				content: "";
				position: absolute;
				top: 5px;
				background: white;
				border-radius: 20px;
				height: 3px;
				width: 4px;
			}
			
			$toe-position: 20px;
			$shoe-rotate: 20deg;
			$heel-position: -10px;
			$shoe-position: -12px;
			$toe-shine-position: 5px;
			$toe-shine-rotate: 45deg;
			
			&.left {
				left: $toe-position;
				
				&:after {
					left: $toe-shine-position;
					@include rotate(-$toe-shine-rotate);
				}
				
				&:before {
					right: $heel-position;
				}
				
				.shoe {
					right: $shoe-position;
					@include rotate(-$shoe-rotate);
				}
			}
			
			&.right {
				right: $toe-position;
				
				&:after {
					right: $toe-shine-position;
					@include rotate($toe-shine-rotate);
				}
				
				&:before {
					left: $heel-position;
				}
				
				.shoe {
					left: $shoe-position;
					@include rotate($shoe-rotate);
				}
			}
			
			&:before /* heel */ {
				content: "";
				position: absolute;
				bottom: 0px;
				height: 8px;
				width: 10px;
				background: black;
			}
			
			.shoe {
				position: absolute;
				bottom: 3px;
				width: 30px;
				height: 14px;
				background: black;
				border-radius: 20px;
			}
		}
	}
}