CodePen Embed - #codevember D09 Green :)

<div class="container">
	<div class="force"></div>
	<div class="lower">
		<div class="legs">
			<div class="shorts">
				<div class="details"></div>
			</div>
		</div>
	</div>
	<div class="upper">
			<div class="hulk">
			<div class="hands">
				<div class="details"></div>
			</div>
			<div class="body">
				<div class="details"></div>
			</div>
			<div class="head">
				<div class="ears"></div>
				<div class="face">
					<div class="eyes"></div>
					<div class="nose"></div>
					<div class="mouth">
						<div class="details"></div>
					</div>
					<div class="chin"></div>
					<div class="hair"></div>
				</div>
			</div>
		</div>
	</div>
</div>

* { 
	margin: 0;
	padding: 0;
	background-color: 0; 
}
$main: 500px;
.container {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -100%);
	bottom: 0;
	width: $main;
	height: $main;
	overflow: hidden;
	// border: solid black 1px;
}
.lower{
	position: absolute;
	width: 100%;
	height: $main*0.3;
	bottom: 0;
	overflow: hidden;
	background-color: transparent;
}
.legs{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -20px);
	$size: 120px;
	width:$size;
	height:$size;
	border-radius:50%;
	border: solid $size #48B758;
	background-color: transparent;
	&:before{
		content: '';
		position: absolute;
		transform: translate(-$size,-$size);
		width:$size;
		height:$size;
		border-radius:50%;
		border: solid $size transparent;
		border-top: solid $size #480548;
		background-color: transparent;
	}
	&:after{
		content: '';
		position: absolute;
		$size: 20px;
		width:$size;
		height:$size;
		border-radius:50%;
		background-color: #A4D077;
		top: 40px;
		left: -125px;
		box-shadow:
			15px 0 0 #A4D077,
			15px*2 0 0 #A4D077,
			15px*3 0 0 #A4D077,
			15px*4 0 0 #A4D077,
			15px*5 0 0 #A4D077,
			15px*6 0 0 #A4D077,
			15px*7 -5px 0 #A4D077,
			15px*8 -0px 0 #A4D077,
			230px+15px*0 0 0 #A4D077,
			230px+15px*1 -5px 0 #A4D077,
			230px+15px*2 0px 0 #A4D077,
			230px+15px*3 0px 0 #A4D077,
			230px+15px*4 0px 0 #A4D077,
			230px+15px*5 0px 0 #A4D077,
			230px+15px*6 0px 0 #A4D077,
			230px+15px*7 -0px 0 #A4D077,
			230px+15px*8 -0px 0 #A4D077;
	}
}
.shorts{
	position: absolute;
	$size: 20px;
	width:$size;
	height:$size;
	border-radius:50%;
	background-color: #48B758;
	box-shadow:
		-23px -23px 0 #48B758,
		-23px*2 -23px*2 0 #48B758,
		-23px*2 -23px*2 0 #48B758,
		-23px*3 -23px*3 0 #48B758,
		100px 0 0 #48B758,
		100px+23px -23px 0 #48B758,
		100px+23px*2 -23px*2 0 #48B758,
		100px+23px*2 -23px*2 0 #48B758,
		100px+23px*3 -23px*3 0 #48B758;
	&:before{
		content: '';
		position: absolute;
		$size: 14px;
		width:$size;
		height:$size;
		border-radius:50%;
		background-color: #480548;
		left: -9px;
		top: -8px;
		box-shadow:
		-23px -23px 0 #480548,
		-23px*2 -23px*2 0 #480548,
		-23px*2 -23px*2 0 #480548,
		124px 0px 0 #480548,
		124px+23px -23px 0 #480548,
		124px+23px*2 -23px*2 0 #480548,
		124px+23px*2 -23px*2 0 #480548,
	}	
	&:after{
		position: absolute;
		content: '';
		$size: 12px;
		width:$size;
		height:$size;
		border-radius:50%;
		background-color: #48B758;
		top: -40px;
		left: -10px;
		box-shadow: 120px 0 0 #48B758;
	}
}
.shorts > .details{
	position: absolute;
	$size: 20px;
	width:$size;
	height:$size;
	border-radius:50%;
	background-color: #60195F;
	top: -100px;
	left: -29px;
	box-shadow: 
		31px*1 0 0 #60195F,
		31px*2 0 0 #60195F,
		31px*3 0 0 #60195F,
		31px*4 0 0 #60195F,
		31px*5 0 0 #60195F;
	&:before{
		content: '';
		position: absolute;
		background-color: #60195f;
		width: 175px;
		height: 8px;
		border-radius: 5em;
	}
	&:after{
		content: '';
		position: absolute;
		background-color: #48B758;
		$size: 20px;
		width:$size;
		height:$size;
		border-radius:50%;
		top: 30px;
		left: -15px;
		box-shadow: 170px 10px 0px #48B758;
	}
}
.upper{
	position: absolute;
	width: 100%;
	height: $main*0.7;
	top: 0;
	overflow: hidden;
	background-color: transparent;
}
.hands{
	position: absolute;
	$size: 100px;
	width:$size + 200px;
	height:$size;
	border-radius:100em;
	border: solid $size #48B758;
	&:before{
		content: '';
		position: absolute;
		background-color: white;
		width:$size*2;
		height:$size;
		top: -100px;
		left: 50px;
		box-shadow: 0 200px 0 white;
	}
	&:after{
		content: '';
		position: absolute;
		$size: 100px;
		width:$size;
		height:$size;
		border-radius:50%;
		background-color: #48B758;
		top: -100px;
		box-shadow: 200px 0 0 #48B758;
	}
}
.hands > .details {
	position: absolute;
	$size: 50px;
	width:$size;
	height:$size;
	border-radius:50%;
	background-color: #A4D077;
	border: solid 20px #48B758;
	top: 30px;
	left: -20px;
	&:after{
		content: '';
		position: absolute;
		width:$size;
		height:$size;
		border-radius:50%;
		background-color: #A4D077;
		border: solid 20px #48B758;
		top: -20px;
		left: 230px;

	}
}
.body{
	// z-index: -1;
	position: absolute;
	$size: 170px;
	width:$size;
	height:$size/2;
	background-color: #48B758;
	bottom: -2px;
	left: 50%;
	transform: translate(-50%,0);
	&:before{
		position: absolute;
		content: '';
		$size: 200px;
		width:$size+50px;
		height:$size;
		border-radius:50%;
		background-color: #48B758;
		bottom: 5px;
		left: 50%;
		transform: translate(-50%,0);
	
	}
}
.body > .details {
	position: absolute;
	$size: 60px;
	width:$size+50px;
	height:$size+12px;
	border-radius:5em;
	background-color: #A4D077;
	top: -80px;
	left: 50%;
	transform: translatex(2px);
	box-shadow: -55-$size 0 0 #A4D077;
	&:after{
		content: '';
		position: absolute;
		$size: 30px;
		width:$size+40px;
		height:$size+12px;
		border-radius:5em;
		background-color: #A4D077;
		top: $size*3 - 10px;
			box-shadow: 
				-45-$size 0 0 #A4D077,
				0 $size+20px 0  #A4D077,
				-45-$size $size+20px 0 #A4D077,
	}
	&:before{
		z-index: 1;
		content: '';
		position: absolute;
		$size: 8px;
		background-color: #48B758;
		width:$size;
		height:$size;
		border-radius:50%;
		top: 50px;
		left: 85px;
		box-shadow: -185px 0 0 #48B758;
	}
}
.face{
	position: absolute;
	$size: 100px;
	width:$size;
	height:$size;
	border-radius:2em 2em 50% 50%;
	background-color: #A4D077;
	left: 50%;
	transform: translate(-50%, 0 );
	top: 90px;
	&:after{
		content: '';
		position: absolute;
		background-color: black;
		$size: 100px;
		width:$size;
		height:$size/2 - 20px;
		border-radius:2em 2em 0 0 ;

	}
}
.eyes{
	position: absolute;
	background-color: black;
	$size: 20px;
	width:$size;
	height:$size/2;
	border-radius:0 0 5em 5em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(20deg) translate(-20px,8px);
	&:after{
		content: '';
		position: absolute;
		background-color: black;
		$size: 20px;
		width:$size;
		height:$size/2;
		border-radius:0 0 5em 5em;
		transform: rotate(-40deg) translate(40px,13px);
	}
}
.nose{
	position: absolute;
	$size: 5px;
	background-color: transparent;
	width:$size;
	height:$size;
	border-radius:50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 4px 10px 0 #48B758,
		-4px 10px 0 #48B758;
}
.mouth{
	position: absolute;
	background-color: black;
	$size: 25px;
	width:$size*2;
	height: -2+$size;
	border-radius:5em;
	bottom: -1px;
	border: solid 5px #A4D077;
	left: 50%;
	transform: translate(-50%, 0);
	overflow: hidden;
	&:after{
		// teeth
		content: '';
		position: absolute;
		background-color: white;
		width:$size*2;
	 height: 5px;
	}
	&:before{
		// tongue
		content: '';
		position: absolute;
		background-color: #EE2760;
		width: $size*2;
	 height: $size;
		bottom: -10px;
		left: 50%;
		transform: translate(-50%, 0);
		border-radius: 5em 5em 0 0 ;
	}
}
.mouth > .details {
	z-index: 1;
	position: absolute;
	// teeth
	background-color: black;
	$size: 5px;
	width:$size;
	height:$size;
	border-radius:50%;
	top: 2px;
	left: 35px;
}
.chin{
		position: absolute;
		$size: 15px;
		background-color: #48B758;
		border: solid 5px #A4D077;
		border-bottom: solid 5px transparent;
		border-right: solid 5px transparent;
		width:$size;
		height:$size;
		border-radius:50%;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 13px) rotate(45deg);
}
.hair{
	z-index: 2;
	position: absolute;
	background-color: black;
	$size: 10px;
	width:$size;
	height:$size;
	border-radius:50%;
	top: 25px;
	box-shadow: 
		20px*1 0 0 black,
		20px*2 0 0 black,
		20px*3 0 0 black,
		20px*4 0 0 black,
		10px*1 0 0 #A4D077,
		10px*3 0 0 #A4D077,
		10px*5 0 0 #A4D077,
		10px*7 0 0 #A4D077,
		10px*9 0 0 #A4D077;
}
.ears{
	// z-index: 1;
	position: absolute;
	$size: 12px;
	background-color: #48B758;
	border: solid 5px #A4D077;
	width:$size;
	height:$size;
	border-radius:50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translate(-50px,-35px);
	&:after{
		content: '';
		position: absolute;
		$size: 12px;
		background-color: #48B758;
		border: solid 5px #A4D077;
		width:$size;
		height:$size;
		border-radius:50%;
		transform: translate(95px,-5px);

	}
}
.force{
	background-color: #A9E6EF;
	position: absolute;
	$size: 15px;
	width:$size;
	height:$size*5;
	border-radius:5em;
	bottom: 0;
	box-shadow: 
		50px -80px 0 #A9E6EF,
		220px -0px 0 #A9E6EF,
		350px -90px 0 #A9E6EF,
		400px -170px 0 #A9E6EF;
	&:after{
		content: '';
		background-color: #6BCEDC;
		position: absolute;
		$size: 20px;
		width:$size;
		height:$size*5;
		border-radius:5em;
		bottom: -10px;
		left: 450px;
		box-shadow: 
			-350px -150px 0 #6BCEDC;
	}
	animation: force 2s infinite;
}
@keyframes force {
	0%{
		opacity:1;
	}
	100%{
		opacity: 0;
		transform: translate(0,-100px);
	}
}
.hulk{
	position: absolute;
	width: 100%;
	height: $main*0.7;
	top: 0;
	background-color: transparent;
	
	animation: breath 2s infinite;
}
@keyframes breath {
	0%,100%{transform:translate(0,0);}
	25%,75%{transform:translate(0,-2px);}
	50%{transform:translate(0,2px);}
}

View Compiled

// https://dribbble.com/shots/5326524-Hulk-Smash

console.log('aaaaa')

This Pen is owned by Tian Qi on CodePen. It is a fork of this Pen.

See more by @kitian616 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.