<div class="fruit"></div>
body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
  background:#95c6ca;
  overflow:hidden;
}
.fruit {
  position:relative;
  width:100px;
  height:200px;
  box-sizing:border-box;
  padding:0 0 3px;
  border:solid #0000;
  border-width: 0 5px;
  background:
    
    radial-gradient(farthest-side,#e5e4e7 98%,#0000) 100% 22%/10% 5% border-box,
    radial-gradient(farthest-side,#e5e4e7 98%,#0000) 0 22%/10% 5% border-box,
    linear-gradient(#e5e4e7 0 0) 0 22%/100% 5%,
    radial-gradient(farthest-side at bottom,#bdd5d7 98%,#0000 ) top/100% 25%,
    linear-gradient(86deg,#e0e4e4 47%,#0000 51%) left bottom/20% 75%,
    linear-gradient(-86deg,#e0e4e4 47%,#0000 51%) right bottom/20% 75%,
    radial-gradient(farthest-side,#fff3 98%,#0000) 76% 73%/6% 3%,
    radial-gradient(farthest-side,#fff3 98%,#0000) 36% 81%/8% 4%,
    radial-gradient(farthest-side,#fff3 98%,#0000) 56% 40%/10% 5%,
    radial-gradient(farthest-side,#fff3 98%,#0000) 25% 51%/8% 4%,
    radial-gradient(farthest-side,#fff3 98%,#0000) 73% 56%/10% 5%,
    radial-gradient(farthest-side,#0003 98%,#0000) 34% 91%/6% 3%,
    radial-gradient(farthest-side,#0003 98%,#0000) 66% 85%/6% 3%,
    radial-gradient(farthest-side,#0003 98%,#0000) 49% 73%/8% 4%,
    radial-gradient(farthest-side,#0003 98%,#0000) 76% 34%/12% 6%,
    radial-gradient(farthest-side,#0003 98%,#0000) 27% 64%/8% 4%,
    radial-gradient(farthest-side,#0003 98%,#0000) 48% 49%/10% 5%,
    radial-gradient(farthest-side,#0003 98%,#0000) 24% 37%/12% 6%,
    linear-gradient(90deg,#0000 20%,#fff3) bottom/100% 75%,
    linear-gradient(var(--c,currentColor) 0 0)bottom/100% 75% content-box,
    linear-gradient(#e0e4e4 0 0)bottom/100% 75%;
  background-repeat:no-repeat;
  clip-path:polygon(0 -100%,100% -100%,100% 26%,96% 26%,84% 101%,200% 101%,200% 125%,-100% 125%,-100% 101%,16% 101%,4% 26%,0 26%);
  animation: b 5s infinite;
}
.fruit:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20%;
    width: 10px;
    background: repeating-linear-gradient(45deg,#fff 0 8px,#f7485d 0 16px);
    bottom: 74.5%;
    left: calc(50% - 5px);
    mix-blend-mode: overlay;
    transform-origin: bottom;
    transform: rotate(10deg);
}
.fruit:after {
  content: "ORANGE\A BLUEBERRY\A ANANAS\A KIWI\A STRAWBERRY";
  color:#000;
  text-align: center;
  position: absolute;
  white-space: pre;
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
  top: 105%;
  left: 50%;
  line-height: 30px;
  animation: a 5s steps(5) infinite;
}
@keyframes a {
  0%{
    transform: translate(-50%,0);
    clip-path: inset(0 0 calc(100% - 30px));
  }
  100%{
    transform: translate(-50%,-100%);
    clip-path: inset(100% 0 -30px);
  }
}

@keyframes b {
  0%   ,20%{color:#faca44;--c:#faca44}
  20.1%,40%{color:#8f73da;--c:#8f73da}
  40.1%,60%{color:#fbf4a2;--c:#fbf4a2}
  60.1%,80%{color:#96b233;--c:#96b233}
  80.1%,100%{color:#f63758;--c:#f63758}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.