SnapSVG Icon_1

by id0

HTML

<script src="https://cdn.jsdelivr.net/snap.svg/0.4.1/snap.svg-min.js"></script>
<div class="layout">
<div class="icon">
<svg class="icon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 50">
  <path id="path_1" class="cls-3" d="M0,0V45l6,5V4Z"/>
  <path id="path_2" class="cls-2" d="M6,4V50l6-5V0Z"/>
  <path id="path_3" class="cls-3" d="M12,0V45l6,5V4Z"/>
  <path id="path_4" class="cls-2" d="M18,4V50l6-5V0Z"/>
  <path id="path_5" class="cls-1" d="M24,0H40a4,4,0,0,1,4,4V41a4,4,0,0,1-4,4H24Z"/>
</svg>
</div>
</div>

SCSS

.layout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}
.icon {
  width: 200px;
}
.cls-1{fill:#e65156;}
.cls-2{fill:#d44a4f;}
.cls-3{fill:#f26a6f;}

Babel + JSX

Snap.select("#path_1").animate(
  { d: "M0,0V45l3.2,5V4Z" }, 
  1000, mina.bounce
);
Snap.select("#path_2").animate(
  { d: "M3.2,4V50l4.28-5V0Z" }, 
  1000, mina.bounce
);
Snap.select("#path_3").animate(
  { d: "M7.48,0V45l3.2,5V4Z" }, 
  1000, mina.bounce
);
Snap.select("#path_4").animate(
  { d: "M10.68,4V50L15,45V0Z" }, 
  1000, mina.bounce
);
Snap.select("#path_5").animate(
  { d: "M15,0H31a4,4,0,0,1,4,4V41a4,4,0,0,1-4,4H15Z" }, 
  1000, mina.bounce
);