div(class="container")
  div.icecream
    div.flavor
      div.flavours
    div.stick
View Compiled
body,
html { height: 100%; }

.container {
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  
}

.icecream > .flavor {
  position: relative;

  width: 190px;
  height: 260px;
  
  border-radius: 80px 80px 10px 10px;
  overflow: hidden;
  
  &:after {
    content: '';
    
    position: absolute;
    left: 21px;
    bottom: 20px;
    
    width: 20px;
    height: 170px;
    
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.5);
    
  }
  
}

.icecream > .flavor > .flavours {
  position: relative;
  top: 0%;
  left: -20%;
  width: 140%;
  height: 120%;
  
  background-image: linear-gradient(0deg,  #e83021 25%,#30dcf6 25%,#30dcf6 25%,#30dcf6 50%,#f2d200 50%,#f2d200 50%,#f2d200 75%,#bbfff8 75%);
	background-position: 0px 0px;
	background-repeat: repeat-y;

  animation: flavours 5s linear infinite;
  
  transform: rotate(155deg);
  
}

.icecream > .stick {
  width: 57px;
  height: 86px;
  
  background: #E09C5F;
  border-radius: 0 0 25px 25px;
  
  display: block;
  margin: 0 auto;
  
  &:after {
    display: block;
    content: '';

    width: 100%;
    height: 24px;
    
    background: #8D613B;
    
  }
  
}

@keyframes flavours {
  to {
    background-position: 0 -100vh;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.