console
<div id="kokeshi"></div>
$bg:lightcoral;
$body:darkcyan;
$face:beige;
$flowers:cadetblue;
$black: black;
$mouth:crimson;
$n:20vw;
html{
height:100%;
}
body{
margin: 0;
background: $bg;
height:100%;
background: radial-gradient(ellipse,
$bg 0,
darken($bg, 15) 100%);
}
#kokeshi{
width:$n;
height:$n*1.3;
background: $body;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
margin:auto;
top:50%;
box-shadow:
inset 0 (-$n) $n/10 0 rgba(white, .2), //neck shadow
inset 0 (-$n/10) 0 0 rgba(black, .2), //neck shadow
inset $n/4 (-$n/1.5) 0 0 darken($body, 6), //kimono (l)
inset $n/3 (-$n/1.5) 0 0 darken($bg, 20), //kimono (l)
inset (-$n/4) (-$n/1.5) 0 0 darken($body, 3), //kimono (r)
inset (-$n/3) (-$n/1.5) 0 0 darken($bg, 30), //kimono (r)
}
//face
#kokeshi:after{
content:'';
position: absolute;
border-radius:50% ;
top:-($n/5.9);
left:$n/5;
width:$n/5;
height:$n/10;
background: $face;
-webkit-backface-visibility:hidden;
z-index:999;
box-shadow:
($n/2.2) ($n/7) $n/10 0 rgba($mouth,.2), //blush (r)
(-$n/20) ($n/7) $n/10 0 rgba($mouth,.2), //blush (l)
($n/2.3) 0 0 0 $face, // eyelid (r)
(-$n/50) (-$n/30) 0 0 $black, // eye (l)
($n/2.2) (-$n/30) 0 0 $black, // eye (r)
($n/2.2) (-$n/12) $n/15 ($n/50) rgba($flowers,.5), //eyeshadow (r)
(-$n/20) (-$n/12) $n/15 ($n/50) rgba($flowers,.5), //eyeshadow (l)
($n/4.5) ($n/13) 0 0 $face, //mouth
($n/4.5) ($n/8) 0 (-$n/40) $mouth, //mouth
// ($n*.8) (-$n*.35) 0 ($n*.1) $mouth, //flower1
($n*.8) (-$n*.35) 0 ($n*.2) $black, //bun (r)
(-$n*.39) (-$n*.35) 0 ($n*.2) $black, //bun (l)
$n/4.7 (-$n/5.5) $n/20 $n/3 $face, //face hilight
$n/4.7 (-$n/5.5) 0 $n/2.55 darken($face, 7), //face
$n/4.7 (-$n/4) 0 $n/2.5 $mouth, //headband
($n*.21) (-$n*.6) 0 ($n*.5) $black //bun (top)
;
}
#kokeshi:before{
content:'';
position: absolute;
top:-$n + $n/4;
left:(-$n/15);
box-sizing:border-box;
height:$n;
width:$n*1.15;
border-top:solid $n/2 $black;
border-left:solid $n/6 $black;
border-right:solid $n/6 $black;
border-bottom:solid $n/2 transparent;
border-radius: 40% 40% 40% 40% /80% 80% 80% 80%;
z-index:9999;
}