Frontend Happy Hour logo

Just messing around

by Augustus Yuan

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 240" style="enable-background:new 0 0 400 240;" xml:space="preserve">
                    <path id="XMLID_2_" class="st0" d="M85.3,42.6L5.1,67l56.4,114.1c0,0,3.5,7.7,18.6,7.7c20.2,0.4,86.5-28.2,86.5-28.2
                        s-75.9,27.1-92.3,17.9S21.1,83.3,22,75.7C24.6,69.9,85.3,42.6,85.3,42.6z"></path>
                    <path id="XMLID_1_" class="st0" d="M41.3,110.7L71.7,169c0,0,3.8,4.7,14.2,4.7s32.4-3,46.8-8c14.4-5,44-21.7,47.3-27.7
                        c3.3-6-21-115-21-115l-12.3,10.7c0,0,8,63.7,6.3,76.3s-3.3,16.7-28.7,26s-37.3,10.7-45,8S41.3,110.7,41.3,110.7z"></path>
                    <path id="XMLID_3_" class="st0" d="M165,20.3c-1.5,0,28.5,143.8,26,149.3c-2.5,5.6-10,16.3-43.3,27.7c-33.3,11.3-65.5,11.7-66,13.7
                        c0,7.8,55.3-2.3,68-5.7c12.7-3.3,20-6.7,29-12.7s18.7-19,18.7-19S166.5,20.3,165,20.3z"></path>
                    <path id="XMLID_6_" class="st0" d="M316.7,47.2l77.2,32.4l-67.7,107.8c0,0-4.2,7.3-19.3,5.8c-20.1-1.6-83.2-36.9-83.2-36.9
                        s72.8,34.7,90,27.2c17.2-7.5,62.7-89.3,62.6-97C374.3,80.6,316.7,47.2,316.7,47.2z"></path>
                    <path id="XMLID_5_" class="st0" d="M353.5,119.4l-36.1,54.9c0,0-4.2,4.3-14.6,3.2s-31.9-6.3-45.7-12.7c-13.8-6.4-41.6-26-44.3-32.3
                        s32.6-112.3,32.6-112.3l11.2,11.9c0,0-14.4,62.5-14.1,75.3s1.6,16.9,25.9,28.8c24.3,11.9,36.1,14.4,44,12.5
                        C320.2,146.8,353.5,119.4,353.5,119.4z"></path>
                    <path id="XMLID_4_" class="st0" d="M239.6,17c1.5,0.2-43,140.1-41.1,145.9c1.9,5.8,8.3,17.3,40.3,31.9c32,14.7,64,18.3,64.3,20.3
                        c-0.8,7.7-54.8-8-67.1-12.6c-12.3-4.6-19.2-8.7-27.6-15.6c-8.3-6.9-16.6-20.8-16.6-20.8S238.1,16.8,239.6,17z"></path>
                    </svg>

CSS

body {
  background: #2D363F;
}

.st0 {
   fill: #E2E3E1;
   stroke: #E2E3E1; 
   stroke-width: 1;
   stroke-miterlimit: 10; 
   stroke-dasharray: 1000;
   stroke-dashoffset: 1000;
   animation: dash 3.5s linear forwards, fill-fadelinear forwards 1s;
   -webkit-animation: dash 3.5s linear forwards, fill-fade linear 1s;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-fade {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}