Pencils

HTML
<div class='jar'> <div class='inner'></div> <div class='pencil'> <div class='eraser'></div> </div> <div class='pencil'> <div class='eraser'></div> </div> <div class='pencil'> <div class='eraser'></div> </div> </div>
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; } }
JAVASCRIPT
Expand for more options Login