Two SVG animations at loading

by Igor

HTML

<section class="welcome">
        	<svg xmlns="http://www.w3.org/2000/svg" width="1e3pt" height="350pt" viewBox="0 0 1e3 350" id="title">
				<path fill="none" stroke="#fff" class="go" d="m909.1 234.4c-.6.7-.9 2.1-.5 3 .8 2.1 7.2 2.2 8 .1 1.4-3.6-5-6.2-7.5-3.1zm-21.4-104c-15 5.5-28.3 30.3-24.8 46.1 1.5 6.7 5.6 11.5 9.9 11.5 3.1 0 5.8-2.2 4.7-4-.3-.5-1.5-1-2.5-1-2.7 0-4-3-4-8.9 0-13.2 5.2-25.2 14.7-34.1 10.1-9.5 13.3-8.1 13.3 5.8 0 26.5-15.6 63.7-45.9 109.5-12.2 18.5-11.5 21 4.2 14.7 7.2-2.9 8.2-3 21.9-3 9.8.1 15.5.5 18.3 1.5 2.2.8 5.3 1.5 7 1.5h2.9l-2-2c-1.1-1.2-4.3-2.7-7.1-3.4-7.4-2-25.7-2.9-33.8-1.7-3.8.6-7 .9-7.1.8-.2-.1 3.2-5.6 7.5-12.2 17-26.2 31.4-53.4 36.4-69.2 4.7-14.5 6-21.1 6.1-31.8.1-10-1.8-16.2-6-19-3.4-2.2-9.4-2.7-13.7-1.1zm-218.7 60.3c-4.1 2.1-9.8 9.1-21.2 25.7-7.8 11.3-8.3 11.9-8.6 9-.3-3.3 2.4-15 5.7-24.5 2.2-6.4 1.6-7.9-3.1-7.9-3.4 0-5.6 3.9-9.3 16.5-4.7 16.3-2.5 26.4 5.7 26.5 4.1 0 7.6-3.6 19.1-20.2 5.9-8.5 12-16.7 13.7-18.3 4.7-4.5 5.4-2.8 5.8 13.8l.3 14.2-10.6 11.5c-16.6 17.9-25.1 32.3-28.3 48.1-1.4 6.6-1.4 8.5-.4 12.6 6.2 23.1 32.1 13.5 41.5-15.4 4.4-13.3 7.7-35.2 7.7-50.9 0-5 .1-5.2 5.8-9.6 3.1-2.4 8.4-6.3 11.8-8.6l6.1-4v3c0 3.9 4.2 7.9 7.5 7.3 2.3-.4 5.9-3.9 8.9-8.5l1.6-2.4 1.8 3.7c1 2.1 3.1 4.5 4.8 5.4 4.5 2.3 14 1.4 20.8-2 7.3-3.8 19.1-12.5 18.4-13.7-1.3-2.1-6.2-.8-12 3.1-10.9 7.3-17.7 10.4-22.7 10-2.2-.1-3.8-5.8-3.8-13.9 0-8-1.9-10.2-8.7-10.2-4.2 0-5 .4-9.2 4.7-2.5 2.7-6.6 5.9-9.1 7.2s-8.2 5-12.8 8.2c-4.5 3.3-8.4 5.9-8.6 5.9s-.6-3-1-6.8c-.8-9.3-2.3-13.8-5.4-17.3-3.5-3.7-7.7-4.5-12.2-2.2zm55.4 11.5c-2 2.9-4.2 5.7-4.7 6.3-1.7 1.8 2.5-5.9 5-9.3 4.1-5.5 3.9-2.7-.3 3zm-49.9 53.9c-3.2 22-9.9 39.3-18 46.8-2.4 2.2-5.1 4.1-6 4.1-.8 0-2.5-1.5-3.6-3.3-2.9-4.6-2.2-17.4 1.5-27.2 4.1-10.6 13.8-25.3 24-36.3l3.1-3.3.3 4.1c.2 2.3-.4 9.1-1.3 15.1zm-60.1-178.9c-.4.6-1.8 10.8-3.1 22.7-1.5 13.8-2.8 21.8-3.6 22.3-.6.4-3.9.8-7.2.8-14.1 0-59.2 4.9-71.7 7.7-5.9 1.3-6.6 1.6-5.4 2.9 2 2 8.1 1.8 29.3-.8 17.9-2.1 18.4-2.1 24-.4 13.5 4.3 21.5 10.3 26.4 19.8 3.5 6.9...

CSS

body {
  background-color: #999999
}
.welcome {
  position: relative;
  display: block;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  background-color: rgba(0,0,0,0.5)
}

#title {
  position: relative;
  display: none;
  margin: 0;
  padding: 0 0 0 30px;
  width: 48%;
  max-width: 1000px;
  height: auto;
  max-height: 350px;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
  z-index: 2
}

.go {
  stroke: #fff;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: go 3s linear 2s forwards;
}

@keyframes go {
  0% {
    stroke-width: 4;
    stroke-dashoffset: 1800;
    fill: rgba(255, 255, 255, 0);
  }

  100% {
    stroke-width: 1;
    stroke-dashoffset: 0;
    fill: rgba(255, 255, 255, 1);
  }
}

#subtitle {
  position: relative;
  display: none;
  margin: -30px 0 0;
  padding: 0 0 0 32%;
  width: 20%;
  max-width: 400px;
  height: auto;
  max-height: 70px;
  z-index: 2
}

.go2 {
  stroke: #2b4462;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: go2 3s linear 5s forwards;
}

@keyframes go2 {
  0% {
    stroke-width: 4;
    stroke-dashoffset: 700;
    fill: rgba(43, 68, 98, 0);
  }

  100% {
    stroke-width: 1;
    stroke-dashoffset: 0;
    fill: rgba(43, 68, 98, 1);
  }
}

.welcome {
  min-height: 100vh;
  padding: 0;
  background: url("img/bg1.jpg") center center/cover no-repeat
}

JavaScript

$(document).ready(function() {
		$('#title').css('display', 'block');
		$('#subtitle').css('display', 'block');
	})