SCSS
$jar: #d8e7e6;
$pencil: #ffc408;
$tip: #f3f1d6;
$lead: #333;
$eraser: #f5b4b8;
@mixin size($h: 100%, $w: 100%) {
height: $h;
width: $w;
}
body {
@include size(100vh, 100vw);
align-items: center;
display: flex;
justify-content: center;
margin: 0;
overflow: hidden;
.jar {
@include size(60vmin, 45vmin);
align-items: center;
background: none;
display: flex;
flex-direction: column;
justify-content: center;
background:red;
border-radius:15%;
background:$jar;
position:relative;
margin-top:20%;
box-shadow:inset 20px 0px 30px $jar, inset 25px 0px 10px lighten($jar, 15%);
&:before, &:after{
content:'';
position:absolute;
@include size(4vmin, 70%);
background:red;
top:-7vmin;
left:15%;
border-radius:100%;
background:linear-gradient(to bottom, $jar, darken($jar, 6%));
}
&:after{
background:$jar;
@include size(10vmin, 70%);
top:-5vmin;
border-radius:0px 0px 100% 100%;
z-index:-1;
box-shadow:inset 0px -10px 0px $jar, inset 20px 0px 30px $jar, inset 25px 0px 10px lighten($jar, 15%);
}
.pencil{
position:absolute;
@include size(75vmin, 2vmin);
background:$pencil;
border-radius:0 0 100% 100% / 0 0 3% 3%;
box-shadow:0.75vmin 0 0 darken($pencil, 5%), -0.75vmin 0 0 darken($pencil, 5%);
top:-25vmin;
transform:rotate(-10deg);
&:nth-of-type(2){
transform:rotate(-15deg) translateX(-5vmin);
filter:brightness(0.8);
top:-26.5vmin;
}
&:nth-of-type(3){
transform:rotate(15deg) translateX(4vmin);
filter:brightness(0.9);
top:-26.5vmin;
}
.eraser{
position:absolute;
width:calc(100% + 1.5vmin);
left:-0.75vmin;
border-radius:0px 0px 100% 100% / 0px 0px 50% 50%;
height:5vmin;
background:$eraser;
box-shadow:inset 0px 15px 0px $eraser, inset 0px -5px 4px lighten($lead, 60%), inset 0px -8px 4px lighten($lead, 70%), inset 0px -14px 5px lighten($lead, 60%), inset 0px -19px 0px lighten($lead, 70%), 0px 1px 1px 0px lighten($lead, 60%), 0px 10px 0px 0px lighten($lead, 70%);
&:before{
content:'';
position:absolute;
width:100%;
height:1.5vmin;
top:-1vmin;
background:lighten($eraser, 5%);
box-shadow:0px 0px 0px 0.5px lighten($eraser, 5%);
border-radius:100%;
}
}
&:after, &:before{
content:'';
position:absolute;
bottom:-5.5vmin;
width: 0;
height: 0;
left:50%;
transform:translateX(-50%);
border-style: solid;
border-width: 6vmin 1.75vmin 0 1.75vmin;
border-color: $tip transparent transparent transparent;
}
&:after{
border-width: 3vmin 0.75vmin 0 0.75vmin;
border-color: $lead transparent transparent transparent;
}
}
.inner{
position:absolute;
background:$jar;
width:50%;
height:104%;
top:-5.5%;
z-index:2;
opacity:0.3;
}
}
p{
position:absolute;
bottom:10px;
right:10px;
color:$lead;
font-size:10px;
}
}
