popsicle

by heavyhorse

HTML

<!--// PATH VARIABLES ////-->
<!--// HTML ////-->
<div class="wrapper">
    <h1 class="title">brb. don't melt away...</h1>
    <div id="box">
      <!--POP-->
      <svg id="pop" viewBox="0 0 500 500">
        <!--STICK-->
        <path d="M160.8,370.5l-37.6,59.7c0,0-8.5,12,4.2,18.7s22.6-6.7,22.6-6.7l36.2-57 C186.2,385.2,179.1,366.5,160.8,370.5z" class="stick-shdw"></path>
        <path d="M152.8,390.2c-10.7,17.3-21.3,34.7-21.3,34.7s-14.7,16,0,24c11.6,6.3,20-8,20-8l26.7-44 C178.2,396.8,161.9,375.4,152.8,390.2z" class="stick"></path>
        <!--RED WHITE BLUE-->
        <path d="M176.5,253.8l-30.3,49.7c0,0-10.7,18.7-2.7,32c-1.3,4-10.7,22.7,6.7,38.7 c6.7,1.3,21.3,5.3,26.7,13.3c5.3,8,20,8.7,29.3,6c4-4,10.7-4,17.3-1.3c8,2.7,12-0.7,21.3-15.3c9.3-14.7,42.7-65.3,42.7-65.3 L176.5,253.8z" class="white"></path>
        <path d="M218.2,184.8l-45.3,73.3c0,0,9.3,16,6.7,21.3s-14.7,24,5.3,34.7c12,2.7,19.3-8.9,32,9.3 c10.7,15.3,30.7,18.7,48-2.7c6.7,0,14.3,3.7,19.7-3c5.3-6.7,46.7-70.3,46.7-70.3L218.2,184.8z" class="blue"></path>
        <path d="M356.5,208.5c13.3-22.7,20-36,20-60c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,26.7,6.7,29.3,16c2.7,9.3,6.7,13.3,28,13.3c8-1.3,21.7-6.7,29.7-2.7L356.5,208.5z" class="red"></path>
        <!--SHADOW HIGHLIGHT-->
        <path d="M151.5,370.8c0,0,124.2-193.4,134.7-212c10.7-14.7,28-26.7,33.3-24c5.3,2.7,5.3,24-6.7,42.7 c-14,21.8-137.3,206.7-137.3,206.7S167.5,373.5,151.5,370.8z M220.8,386.8c0,0,113.3-169.3,126.7-190.7s4-34.7,4-22.7s-24,44-24,44 l-112,166.7L220.8,386.8z M270.2,136.2c10.7-10.7,17.3-13.3,12-14.7c-5.3-1.3-13.3,8-28,22.7c-14.7,14.7-98.7,154.7-105.3,168 c-6.7,13.3-4,18.7-4,18.7S259.5,146.8,270.2,136.2z" class="shadow"></path>
        <path d="M348.5,68.8c-8-9.3-8-20-2.7-17.3c0,0,8,13.3,28,21.3S356.5,78.2,348.5,68.8z M255.2,166.2...

CSS

.wrapper {
    min-height: 550px;
    min-width: 400px;
}
#box {
  position: absolute;
  width: 550px;
  height: 550px;
  top: 50%;
  left: 50%;
  margin-top: -275px;
  margin-left: -275px;
}
svg {
  overflow: visible;
}
.red {
  fill: #d83137;
}
.blue {
  fill: #18a3d7;
}
.white {
  fill: #e6e7e8;
}
.stick {
  fill: #f4d5a3;
}
.stick-shdw {
  fill: #d9b580;
}
.drip1 {
  fill: #e6e7e8;
  opacity: 0;
}
.drip2 {
  fill: #18a3d7;
  opacity: 0;
}
.drip3 {
  fill: #d83137;
  opacity: 0;
}
.shadow {
  fill: url("#grad1");
}
.highlight {
  fill: url("#grad2");
}
stop.g1 {
  stop-color: #fff;
  stop-opacity: 0;
}
stop.g2 {
  stop-color: #43445d;
  stop-opacity: 0;
}
stop.g3 {
  stop-color: #ae2e3a;
}
stop.g4 {
  stop-color: #fff;
  stop-opacity: 0.2;
}
stop.g5 {
  stop-color: #fff;
  stop-opacity: 0.15;
}
stop.g6 {
  stop-color: #fff;
  stop-opacity: 0.2;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #252532;
}
.title {
  font-size: 20px;
  text-align: center;
  color: #76daff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-left: -55px;
}