<body>
  <div class="box-canvas">
    <div class="cone"></div>
    <div class="drip"></div>
    <div class="scoop"></div>
  </div>
</body>
:root {
  --ice-cream-color: #FCB8C3;
  --ripple-color: #FC889B;
  --cone-color: #F7C077;
  --waffle-color: #F3A63A;
}

body{
  background: #845D43;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 150px;
  height:600px;
}

.cone {
  position: absolute;
  top: 120px;
  width: 120px;
  height: 210px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cone-color);
  background: repeating-linear-gradient(
  45deg,
  var(--cone-color),
  var(--cone-color) 20px,
  var(--waffle-color) 20px,
  var(--waffle-color) 25px
  );
  clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0);
}

.cone::before {
  content: '';
  width: 120px;
  height: 210px;
  position: absolute;
  background: repeating-linear-gradient(
  -45deg,
  transparent,
  var(--cone-color) 20px,
  var(--waffle-color) 20px,
  var(--waffle-color) 25px
  );
}

.drip {
  position: absolute;
  background: var(--ice-cream-color);
  height: 20px;
  width: 30px;
  top: 120px;
  left: 15px;
  border-radius: 0 0 50% 50%;
  border-left: 2px solid var(--ripple-color);
  border-bottom: 1px solid var(--ripple-color);
}

.drip::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 20px;
  background: var(--ice-cream-color);
  height: 20px;
  width: 50px;
  border-radius: 0 0 50% 50%;
  border-bottom: 1px solid var(--ripple-color);
}

.drip::after {
  content: '';
  position: absolute;
  left: 55px;
  top: 20px;
  background: var(--ice-cream-color);
  height: 40px;
  width: 15px;
  border-radius: 0 0 50% 50%;
  border-left: 3px solid var(--ripple-color);
  border-bottom: 1px solid var(--ripple-color);
}

.scoop {
  position: absolute;
  background: var(--ice-cream-color);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border-bottom: 1px solid var(--ripple-color);
}

/* Big ripple */
.scoop::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  transform: rotate(-20deg);
  width: 150px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0px 10px 0px 0px var(--ripple-color);
}

/* Small ripple */
.scoop::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -20px;
  transform: rotate(30deg);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0px 10px 0px 0px var(--ripple-color);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.