<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">

<svg x="0px" y="0px"
	 width="600px" height="auto" viewBox="0 0 800 500">
<g id="logoBorder">
			<path fill="none" stroke="#7b7b7b" stroke-miterlimit="10" d="M155.7,10h57.1c2.4,0,3,.7,3,3.1-.1,19.7-.1,39.3,0,59a4.9,4.9,0,0,1-1.4,4l-50.8,47.1c-2.5-4.1-4.7-8-7.1-11.8-8.7-13.6-23-21.3-38.1-21.3a45.6,45.6,0,0,0-13.7,2.1,44.9,44.9,0,0,0-31.5,45.3c1.1,18.3,10.3,31.9,27.3,39.2a46.1,46.1,0,0,0,18.3,4c10.2,0,19.8-3.8,28.8-11.2,3.3-2.7,6.3-6,9.3-9.1,33.8-33.8,67.2-68.1,101.5-101.4,21.9-21.3,47-32.3,74.3-32.3a115.9,115.9,0,0,1,35.2,5.7c40.8,13,65.9,42,73.7,84.2,11.2,60.4-30.8,117.5-91.8,126.1a105.3,105.3,0,0,1-14.7,1,102.7,102.7,0,0,1-29.7-4.4,9.5,9.5,0,0,0-2.6-.5c-1.7,0-2.1,1.2-1.9,4,.3,4.8,0,9.7.1,14.5.1,2.3-.3,3.5-3.1,3.5H240.8c-2.5,0-2.9-1-2.9-3.2q.1-29.5,0-59A5.9,5.9,0,0,1,240,194l49.7-46.3c2.5,4.1,4.9,8.1,7.4,12a45.2,45.2,0,0,0,38.1,20.8,44.5,44.5,0,0,0,13.4-2.1,45.6,45.6,0,0,0,31.5-47.3c-1.3-18.4-16.3-36-35.2-39.9a52.1,52.1,0,0,0-10.6-1.1c-11.3,0-21.6,4.1-30.4,12.8Q249.6,156.7,195.7,211q-31.5,31.5-76,32.6h-2.5c-49.9,0-95.3-37.1-105-86.2C1.3,102.8,32.1,49.7,84.8,32.6a106.8,106.8,0,0,1,33-5.3,109.5,109.5,0,0,1,29.9,4.2,11.3,11.3,0,0,0,2.9.5c2,0,2.4-1.3,2.1-4.5-.3-4.8,0-9.7-.1-14.5-.1-2.3.6-3.1,3-3.1m0-8a10.9,10.9,0,0,0-8.2,3.1,10.9,10.9,0,0,0-2.9,8.3c.1,1.8,0,3.7,0,5.7s0,2.3,0,3.4a116.7,116.7,0,0,0-26.8-3.2A116.6,116.6,0,0,0,17.7,76.9,117.6,117.6,0,0,0,4.3,159c10.5,52.8,59,92.6,112.9,92.6h2.7c31.6-.8,59-12.5,81.5-35l25-25c27.3-27.3,55.4-55.5,83.3-83.1,7-6.9,15.3-10.5,24.7-10.5a44.3,44.3,0,0,1,9,1c15.1,3.1,27.8,17.5,28.9,32.7a37.8,37.8,0,0,1-25.9,39.1,36.5,36.5,0,0,1-11,1.7,37.4,37.4,0,0,1-31.4-17.1l-4.9-7.9-2.4-3.9-5.1-8.3-7.2,6.7-10.6,9.8-39.2,36.4a13.8,13.8,0,0,0-4.7,10.6c.1,19.2.1,39.1,0,58.9a11.2,11.2,0,0,0,3,8.2,10.8,10.8,0,0,0,8,3h57.1a11,11,0,0,0,8.2-3.1c3-3.1,2.9-7.1,2.9-8.6s0-3.8,0-5.8,0-1.8,0-2.7a110.7,110.7,0,0,0,26.1,3.1,113.8,113.8,0,0,0,15.9-1.1,117,117,0,0,0,78.8-47.6,113.7,113.7,0,0,0,19.7-87.9c-8.4-45.3-35.8-76.5-79.2-90.3a124.3,124.3,0,0,0-37.6-6.1c-29.5,0-56.3,11.6-79.9,34.6s-47.4,47-70.4,70.1l-31.2,31.4-2.4,2.5a77.5,77.5,0,0,1-6.3,6c-7.6,6.2-15.6,9.4-23.7,9.4a38.3,38.3,0,0,1-15.2-3.4c-14-6-21.5-16.9-22.4-32.3a36.8,36.8,0,0,1,25.9-37.2,36.8,36.8,0,0,1,42.6,15.9c1.6,2.4,3.1,4.9,4.6,7.6l2.4,3.9,5.1,8.4,7.2-6.7,10.2-9.4L219.8,82a12.7,12.7,0,0,0,4-9.9V70c0-18.6,0-37.9,0-56.8a11.1,11.1,0,0,0-3-8.1,11,11,0,0,0-8.1-3H155.7Z"/>
  </g>
  
  <g class="ocultar logoFill">
			<path fill="#7b7b7b" d="M163.5,123.2c-2.5-4.1-4.7-8-7.1-11.8-11.4-17.7-32.1-25.3-51.8-19.2a44.9,44.9,0,0,0-31.5,45.3c1.1,18.3,10.3,31.9,27.3,39.2s32.9,4.5,47.1-7.2c3.3-2.7,6.3-6,9.3-9.1,33.8-33.8,67.2-68.1,101.5-101.4,31-30.2,68.4-39.7,109.5-26.6s65.9,42,73.7,84.2c11.2,60.4-30.8,117.5-91.8,126.1a102.9,102.9,0,0,1-44.5-3.4c-4-1.2-4.8-.3-4.5,3.5s0,9.7.1,14.5c.1,2.4-.3,3.6-3.2,3.5q-28.5-.2-57,0c-2.6,0-3-1-3-3.2q.1-29.5,0-59A5.9,5.9,0,0,1,240,194l49.7-46.3c2.5,4.1,4.9,8.1,7.4,12a45.2,45.2,0,0,0,83-28.6c-1.3-18.4-16.3-36-35.2-39.9-15.5-3.2-29.6.4-40.9,11.6Q249.6,156.7,195.7,211q-31.5,31.5-76,32.6c-50.9,1.2-97.6-36.2-107.5-86.2C1.3,102.8,32.1,49.7,84.8,32.6a106.5,106.5,0,0,1,62.9-1.1c4.5,1.3,5.3.3,5-3.9s0-9.7-.1-14.5c-.1-2.4.6-3.1,3.1-3.1h57c2.4,0,3.1.7,3.1,3.1-.1,19.7-.1,39.3,0,59a4.9,4.9,0,0,1-1.4,4Z"/>
		</g>
  <g class="ocultar titulo">
  
  </g>
</svg>
#logoBorder{
  transform: translate(160px, 100px);
  stroke-dasharray:2200px;
  stroke-dashoffset:2200px;
  animation:animalogo 5s forwards;
}

@keyframes animalogo{
  to{
    stroke-dashoffset:0;
    fill:0;
  }
}

.ocultar{
  opacity:0;
}

.logoFill{
  transform: translate(160px, 100px);
  animation: mostrar 1s 4s;
  animation-fill-mode:forwards;
}

.titulo{
  animation: mostrar 2s 4.5s;
  animation-fill-mode:forwards;
}

@keyframes mostrar{
  100%{
    opacity:1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.