Pencil Jar

CSS Code

body {
  background-color: #4F3824;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.pencil-jar-wrapper {
  position: relative;
  margin: auto;
  width: 100vw;
  height: 80vw;
  background: #B0DB43;
}

.shadow-back {
  width: 20%;
  height: 30%;
  position: absolute;
  top: 40%;
  left: 53%;
  background-color: rgba(0, 0, 0, 0.47);
  box-shadow: 0 0 7vw 7vw rgba(0, 0, 0, 0.47);
  border-radius: 20% 20% 0 0;
}

.pencil-jar {
  width: 30%;
  height: 50%;
  position: absolute;
  top: 30%;
  left: 30%;
}
.pencil-jar .body {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: linear-gradient(to right, #DB2763, #b11e4f);
}
.pencil-jar .bottom {
  width: 100%;
  height: 30%;
  position: absolute;
  top: 85%;
  left: 0%;
  background: linear-gradient(to right, #DB2763, #b11e4f);
  border-radius: 50%;
  box-shadow: 0 0 7vw 0 rgba(0, 0, 0, 0.47);
}
.pencil-jar .top {
  width: 100%;
  height: 30%;
  position: absolute;
  top: -15%;
  left: 0%;
  background-color: #df3d73;
  border-radius: 50%;
}
.pencil-jar .top::after {
  content: " ";
  display: block;
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  background: linear-gradient(to left, #c72159, #9c1a45);
  border-radius: 50%;
}

.table {
  width: 100%;
  height: 40%;
  position: absolute;
  top: 60%;
  left: 0%;
  background-color: #4F3824;
  overflow: hidden;
}
.table .shadow-base {
  width: 40%;
  height: 40%;
  position: absolute;
  top: -10%;
  left: 60%;
  transform-origin: bottom left;
  transform: rotate(-45deg);
  background-color: rgba(0, 0, 0, 0.47);
  box-shadow: 0 0 7vw 7vw rgba(0, 0, 0, 0.47);
}

.pencils-wrapper {
  width: 27%;
  height: 36.7%;
  position: absolute;
  top: 0%;
  left: 31.5%;
  border-radius: 0 0 50% 50%/0 0 18.5% 18.5%;
  overflow-y: hidden;
}

.pencil {
  width: 13%;
  height: 100%;
  position: absolute;
  top: 40%;
  left: 0%;
  background: linear-gradient(to right, #FFD166 50%, #333 50%);
}
.pencil::before {
  content: " ";
  display: block;
  width: 0%;
  height: 0%;
  border-style: solid;
  border-width: 0 1.8vw 7.2vw 1.8vw;
  border-color: transparent transparent #C9B482 transparent;
  position: absolute;
  top: -24%;
  left: 0%;
}
.pencil::after {
  content: " ";
  display: block;
  width: 0%;
  height: 0%;
  border-style: solid;
  border-width: 0 0.5vw 2vw 0.5vw;
  border-color: transparent transparent #1c1c1c transparent;
  position: absolute;
  top: -24%;
  left: 35%;
}
.pencil.oblique.left {
  transform: rotate(-20deg);
  position: absolute;
  top: 45%;
  left: 25%;
}
.pencil.oblique.right {
  transform: rotate(10deg);
  position: absolute;
  top: 40%;
  left: 17%;
}
.pencil.short {
  position: absolute;
  top: 75%;
  left: 35%;
  transform: rotate(5deg);
}
.pencil.final {
  position: absolute;
  top: 60%;
  left: 55%;
  transform: rotate(-30deg);
}

HTML Code

<div class="pencil-jar-wrapper">
  <div class="shadow-back"></div>
  <div class="table">
    <div class="shadow-base"></div>
  </div>
  <div class="pencil-jar">
    <div class="bottom"></div>
    <div class="body"></div>
    <div class="top"></div>
  </div>
  <div class="pencils-wrapper">
    <div class="pencil"></div>
    <div class="pencil oblique right"></div>
    <div class="pencil oblique left"></div>
    <div class="pencil final"></div>
    <div class="pencil short"></div>
  </div>
</div>