#lion
	.circle#crown
	.circle#cut-one
	.circle#cut-two
	.circle#cut-three
	.circle#fix
	.circle#jewel-one
	.circle#jewel-two
	.circle#jewel-three
	.circle#jewel-four
	.circle#main
	.circle#arc-one
	.circle#arc-two
	.circle#left-eye
	.circle#right-eye
	.circle#left-pupil
	.circle#fix-left-pupil
	.circle#right-pupil
	.circle#fix-right-pupil
	.circle#under-left-eye
	.circle#under-right-eye
	.circle#fix-nose
	.circle#left-nose
	.circle#right-nose
	.circle#black-nose
	.circle#left-nostril
	.circle#right-nostril
	.circle#beard
	.circle#black-beard
	
link(rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans")
#inspiration
	a(href="https://dribbble.com/shots/2534533-Lion-Head-Perfect-Circle" target="_blank") Inspiration
	p by Omar Ichigo
View Compiled
$size: 25em;
$opacity: 1;
$bg-color: rgba(255, 255, 203, $opacity);
$lion-color: rgba(0, 0, 0, $opacity);

body {
	background: $bg-color;
}

#lion {
	position: absolute;
	left: 50%; top: 50%;
	width: 10em;
	height: 10em;
	
	&:hover .circle {
		border: 3px dashed red;
	}
}
.circle {
	position: absolute;
	transform: translate(-50%, -50%);
	width: $size;
	height: $size;
	border-radius: 50%;
}
@mixin basic-circle($circle-size, $left, $top, $background) {
	width: $circle-size * $size;
	height: $circle-size * $size;
	left: $left * $size;
	top: $top * $size;
	background: $background;
}
#crown {
	@include basic-circle(.5, 0, -.6, $lion-color);
}
#cut-one {
	@include basic-circle(.3, 0, -.75, $bg-color);
}
#cut-two {
	@include basic-circle(.22, -.2, -.65, $bg-color);
}
#cut-three {
	@include basic-circle(.22, .2, -.65, $bg-color);
}
#fix {
	@include basic-circle(.45, 0, -.85, $bg-color);
}
#jewel-one {
	@include basic-circle(.03, -.25, -.56, $lion-color);
}
#jewel-two {
	@include basic-circle(.03, -.1, -.65, $lion-color);
}
#jewel-three {
	@include basic-circle(.03, .1, -.65, $lion-color);
}
#jewel-four {
	@include basic-circle(.03, .25, -.56, $lion-color);
}
#main {
	background: $lion-color;
	box-shadow: 0 -.02*$size $bg-color;
}
#arc-one {
	left: .05*$size;
	top: .07*$size;
	box-shadow: inset .03*$size -.04*$size $bg-color;
}
#arc-two {
	left: .18*$size;
	top: .08*$size;
	box-shadow: inset 0 -.05*$size $bg-color;
}
#left-eye {
	@include basic-circle(.3, -.13, -.16, $bg-color);
}
#right-eye {
	@include basic-circle(.3, .13, -.16, $bg-color);
}
#left-pupil {
	@include basic-circle(.15, -.14, -.22, $lion-color);
}
#fix-left-pupil {
	@include basic-circle(.16, -.14, -.22, none);
	box-shadow: inset 0 .1*$size $bg-color;
}
#right-pupil {
	@include basic-circle(.15, .14, -.22, $lion-color);
	background: $lion-color;
}
#fix-right-pupil {
	@include basic-circle(.16, .14, -.22, none);
	box-shadow: inset 0 .1*$size $bg-color;
}
#under-left-eye {
	@include basic-circle(.13, -.13, -.13, none);
	box-shadow: inset -.02*$size .02*$size $lion-color;
}
#under-right-eye {
	@include basic-circle(.13, .13, -.13, none);
	box-shadow: inset .02*$size .02*$size $lion-color;
}
#fix-nose {
	@include basic-circle(.2, 0, 0, $bg-color);
}
#left-nose {
	@include basic-circle(.19, -.09, .07, $bg-color);
}
#right-nose {
	@include basic-circle(.19, .09, .07, $bg-color);
}
#black-nose {
	@include basic-circle(.19, 0, .1, linear-gradient($lion-color 40%, transparent 40%));
}
#left-nostril {
	@include basic-circle(.11, -.05, .1, linear-gradient($bg-color 40%, transparent 40%));
}
#right-nostril {
	@include basic-circle(.11, .05, .1, linear-gradient($bg-color 40%, transparent 40%));
}
#beard {
	@include basic-circle(.22, 0, .28, $bg-color);
}
#black-beard {
	@include basic-circle(.23, 0, .28, none);
	box-shadow: inset 0 -.06*$size $lion-color;
}

#inspiration {
	position: fixed;
	right: 1em;
	bottom: 1em;
	font-family: Open Sans;
	z-index: 20;
	& a {
		display: inline-block;
		float: left;
		text-decoration: none;
		font-weight: bold;
		color: red;
		transition: all 1s ease;
		&:hover {
			color: #212121;
		}
	}
	& p {
		margin: 0;
		padding-left: .4em;
		display: inline-block;
		float: right;
		color: rgba(0,0,0,.8);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.