<!-- DAILY CSS IMAGES 16 - FRANKENSTEIN -->

<div class="canvas">
	<div class="head">
		<div class="earring"></div>
		<div class="hair"></div>
		<div class="head-copy"></div>
		<div class="hair"></div>
		<div class="scar">
		<ul class="scars">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		</div>
		<div class="eyebrow"></div>
		<div class="eyes">
			<div class="left">
				<div class="inner-eye"></div>
			</div>
			<div class="right">
				<div class="inner-eye"></div>
			</div>
		</div>
		<div class="mouth">
			<div class="teeth"></div>
		</div>
		<div class="neck">
			<div class="bolts">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</div>
	
</div>
/* COLORS */
$bg: #222233
$lgreen: #00CF80
$dgreen: #3CB572
$silver: #AAAAAA
$black: #383838
$grey: #494949
$blood: #AA5C5C

/* MIXINS */

@mixin pseudo ($position: absolute, $display: block, $content: '')
	position: $position
	display: $display
	content: $content

@mixin eye-blink ($name: blink, $timef: linear, $dur: 5s, $delay: 2s, $iter: infinite, $fill: forward)
	animation-name: $name
	animation-timing-function: $timef
	animation-duration: $dur
	animation-delay: $delay
	animation-iteration-count: $iter
	animation-fill-mode: $fill

*
	box-sizing: border-box

body, html
	height: 100%
	width: 100%
	background: $bg

.canvas
	position: relative
	top: 15%
	margin: auto
	height: 350px
	width: 350px
	background: $bg

/* FRANKENSTEIN'S MONSTER*/

/* HEAD, EARS, EYES, HAIR */

%ears
	top: 55%
	height: 20%
	width: 25%
	background: $lgreen
	border-radius: 50%

%inner-ears
	top: 60%
	height: 10%
	width: 8%
	background: $dgreen

%eyes
	position: absolute
	height: 15px
	width: 12px
	background: $black
	border-radius: 50% / 25%
	transform-origin: 100%

%bone
	top: -12px
	height: 8px
	width: 40px
	border-top: 2px solid $lgreen
	border-left: 2px solid transparent
	border-right: 2px solid transparent
	border-radius: 40%
	z-index: 3

%eyebrow	
	height: 7px
	width: 25px
	background: $black
	border-radius: 5px

.hair
	position: absolute
	top: -1px
	background: $black
	width: 100%
	height: 15%
	border-radius: 1em 1em 0 0
	z-index: 2

	&::after
		@include pseudo
		top: 80%
		height: 100%
		width: 100%
		background: linear-gradient(45deg, $black 0, transparent 0%, transparent 66.667%, #383838 0%), linear-gradient(-45deg, transparent 33.333%, transparent 0%, transparent 66.667%, #383838 0%)
		background-size: 30px 30px
		background-repeat: repeat-X
	
.head
	position: absolute
	top: 5%
	left: 27.5%
	height: 50%
	width: 45%
	background: $lgreen
	border-radius: 2em 2em 3em 3em
	
	&::before
		@include pseudo
		@extend %ears
		left: -11%
	
	&::after
		@include pseudo
		@extend %ears
		right: -11%
	
.head-copy
	position: absolute
	height: 100%
	width: 100%
	background: $lgreen
	border-left: 2px solid $dgreen
	border-right: 2px solid $dgreen
	border-bottom: 1px solid $dgreen
	border-radius: 2em 2em 3em 3em
	z-index: 2

	&::before
		@include pseudo
		@extend %inner-ears
		left: -8%
		border-radius: 50% 0 0 50%
	
	&::after
		@include pseudo
		@extend %inner-ears
		right: -8%
		border-radius: 0 50% 50% 0	
	
.eyebrow
	position: absolute
	top: 50%
	width: 100%
	z-index: 4

	&::before
		@include pseudo
		@extend %eyebrow
		top: 1px
		left: 30%
		transform: rotate(10deg)
		
	&::after
		@include pseudo
		@extend %eyebrow
		right: 30%
		transform: rotate(-10deg)
	
.eyes
	position: absolute
	top: 52%
	width: 100%
	z-index: 3

	&::before
		@include pseudo
		@extend %bone
		left: 20%
		transform: rotate(-5deg)
		
	&::after
		@include pseudo
		@extend %bone
		right: 20%
		transform: rotate(5deg)

	.left
		@extend %eyes
		left: 34%	
		@include eye-blink
	
	.right
		@extend %eyes
		right: 34%	
		@include eye-blink

	.inner-eye
		position: absolute
		top: 15%
		left: 1px
		background: #fff
		height: 4px
		width: 4px
		border-radius: 50%	
	
.earring
	position: absolute
	bottom: 22%
	left: -4%
	background: $silver
	height: 10px
	width: 3px
	transform: rotate(10deg)

.scar
	position: absolute
	top: 35%
	left: 15%
	height: 2px
	width: 40%
	background: $grey
	z-index: 4
	transform: rotate(-15deg)

.scars
	position: absolute
	top: -9px
	width: 100%
	margin: 0
	padding: 0
	list-style-type: none
	text-align: center

	li
		margin-top: -10px
		display: inline-block
		background: $grey
		height: 8px
		width: 2px
		margin: 0 3px
	
/* MOUTH, NOSE */	

%teeth
	width: 10px
	background: #fff
	border-radius: 1px 1px 0 0

.mouth
	position: absolute
	bottom: 15%
	left: 35%
	height: 3px
	width: 30%
	background: $black
	z-index: 2
	
	&::before
		@include pseudo
		top: -28px
		left: 15px
		height: 5px
		width: 12px
		border-radius: 0 0 1em 1em
		border-bottom: 3px solid $black
		border-left: 3px solid $black
		border-right: 3px solid $black
		
.teeth
	&::before
		@include pseudo
		@extend %teeth
		top: -5px
		left: 5px
		height: 5px
		border-right: 1px solid $silver
	
	&::after
		@include pseudo
		@extend %teeth
		top: -4px
		left: 16px
		height: 4px
	
/* NECK, BOLTS */

%bolts
	position: absolute
	top: 40%
	height: 35%
	width: 25%
	background: $silver

%end-of-bolt
	top: -4px
	background: $silver
	height: 21px
	width: 8px

.neck
	position: absolute
	bottom: -20%
	left: 30%
	height: 25%
	width: 40%
	background: $lgreen
	border: 2px solid $dgreen
	border-radius: 0 0 5px 5px
	z-index: 1

.bolts
	.left
		@extend %bolts
		left: -22%
		border-right: 2px solid $blood
		border-radius: 5px 0 0 5px
	
		&::before
			@include pseudo
			@extend %end-of-bolt
			left: -5px
			border-radius: 1em
	
	.right
		@extend %bolts
		right: -22%
		border-left: 2px solid $blood
		border-radius: 0 5px 5px 0
	
		&::before
			@include pseudo
			@extend %end-of-bolt
			right: -5px
			border-radius: 1em
	


/* ANIMATIONS /*	

@keyframes blink
	0%
		transform: scale(1)
	1%
		transform: translateY(5px) scaleY(0.1)
	3%, 100%
		transform: scale(1)

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.