Website Header SVG Animation

index.html

<header>
  <div class="head-text">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 638.3 72.9" style="enable-background:new 0 0 638.3 72.9;" xml:space="preserve">
    <g id="n2">
      <path d="M638.3,1.4v57.5h-5.5l-17.7-47.9v47.9h-4.7V1.4h5.5l17.7,47.9V1.4H638.3z"/>
    </g>
    <g id="e3">
      <path d="M585.9,6.1v21.7h12.6v4.7h-12.6v21.7h12.6v4.7h-17.2V1.4h17.2v4.7H585.9z"/>
    </g>
    <g id="e2">
      <path d="M556.7,6.1v21.7h12.6v4.7h-12.6v21.7h12.6v4.7h-17.2V1.4h17.2v4.7H556.7z"/>
    </g>
    <g id="l">
      <path d="M543,54.2v4.7h-19.3V1.4h4.7v52.8H543z"/>
    </g>
    <g id="s">
      <path d="M493.8,12.5c0,3.9,3.2,9.4,9.5,16.5c6.2,5.7,9.3,11.9,9.3,18.6c0,4.1-1.2,7.3-3.6,9.4s-5.4,3.2-8.9,3.2c-3,0-5.7-1-8.1-3
        c-2.3-2-3.9-4.4-4.8-7.3l4.7-1.5c1.3,4,4.1,6.2,8.2,6.4c4.8,0,7.3-2.5,7.3-7.6c0-4.5-3.3-10.1-10-16.7c-5.9-6-8.9-11.9-8.9-17.9
        c0.1-7.5,4-11.7,11.6-12.6c3.3,0,6,0.9,8,2.8c2.1,1.9,3.1,3.9,3.1,6l-4.9,1c-0.1-3.3-2.3-5-6.5-5C495.8,5.7,493.8,8.2,493.8,12.5z"
        />
    </g>
    <g id="r">
      <path d="M439.9,58.9l-6.7-26.4h-7.6v26.4H421V1.4h12.3c4,0,7,1.2,9.1,3.7c2.1,2.5,3.2,5.1,3.2,7.8v8.2c-0.2,2.9-1.1,5.3-2.7,7.2
        c-1.6,1.9-3.3,3.1-5,3.5l7.8,27H439.9z M425.7,27.8h7.6c2.1,0,3.9-0.7,5.4-2.2c1.5-1.5,2.2-3.3,2.2-5.4v-6.5c0-2.1-0.7-3.9-2.2-5.4
        c-1.5-1.5-3.3-2.2-5.4-2.2h-7.6V27.8z"/>
    </g>
    <g id="e1">
      <path d="M396.4,6.1v21.7H409v4.7h-12.6v21.7H409v4.7h-17.2V1.4H409v4.7H396.4z"/>
    </g>
    <g id="d">
      <path d="M367.5,1.2c4,0,7,1.2,9.2,3.6c2.1,2.4,3.2,5.3,3.2,8.8v33.8c0,3.9-1.1,6.7-3.4,8.6c-2.3,1.9-5.2,2.8-9,2.8h-12V1.2H367.5z
         M375.1,13.4c0-1.9-0.7-3.7-2.1-5.3c-1.4-1.6-3.3-2.4-5.5-2.4h-7.3v48.2h7.3c2.1,0,3.8-0.5,5.3-1.5c1.5-1,2.3-2.7,2.3-5.1V13.4z"/>
    </g>
    <g id="n1">
      <path d="M310.7,1.4v57.5h-5.5l-17.7-47.9v47.9h-4.7V1.4h5.5L306,49.4V1.4H310.7z"/>
    </g>
    <g id="a">
      <path d="M268.3,58.9l-2.7-14.1h-12.9L250,58.9h-4.6l11-57.7h5.5l11,57.7H268.3z M264.5,40.1l-5.3-32.2l-5.3,32.2H264.5z"/>
    </g>
    <g id="v">
      <path d="M238.2,1.5l-10.9,57.4h-5.6L210.8,1.5h4.6l9.1,48.2l9.1-48.2H238.2z"/>
    </g>
    <g id="y">
      <path d="M170.5,1.4L161.4,35v23.9h-4.7V35l-9.1-33.6h4.4l7.1,27.9l7.1-27.9H170.5z"/>
    </g>
    <g id="m1">
      <path d="M82,1.4v57.5h-4.7V13.4l-14,45.4h-6.2L43.1,13.5v45.4h-4.7V1.4h6.3l15.6,52.1L75.7,1.4H82z"/>
    </g>
    <g id="m2">
      <path d="M137.6,1.4v57.5h-4.7V13.4l-14,45.4h-6.2L98.7,13.5v45.4H94V1.4h6.3l15.6,52.1l15.5-52.1H137.6z"/>
    </g>
    <g id="i">
      <path d="M21.7,1.4h4.7v57.5h-4.7V1.4z"/>
    </g>
    <g id="j">
      <path d="M9.6,1.3v60.4c0,7.5-3.2,11.2-9.6,11.2v-4.7c3.3,0,5-2.5,5-7.5V1.3H9.6z"/>
    </g>
    </svg>
    <p>developer . designer . creator</p>
  </div>
  <div class="links"></div>
  <div class="rechts"></div>
</header>
<div class="filler"></div>

style.scss

body{
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  font-family: 'Lato', sans-serif;
  font-weight:400;
}
header {
  width: 100%;
  height: 100vh;
  background-color:#333;
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?q=80&fm=jpg&s=79978a74e55792a7a5182ba0c0aa4e25);
  background-size:cover;
  background-position: center top;
  .head-text{
    position: relative;
    top:50%;
    transform: translateY(-50%);
    svg{
      width:80%;
      max-width:1200px;
      margin: 0 auto;
      display: block;
    }

    #j, #i, #m1, #m2, #y, #v, #a, #n1, #d, #e1, #r, #s, #l, #e2, #e3, #n2{
      fill: transparent;
      stroke: #fff;
      stroke-dasharray:643px;
      stroke-dashoffset:643px;
      animation: borderani 5s forwards, stokeFill 4s 1s forwards;
    }

    @keyframes borderani{
      to{ stroke-dashoffset:0;}
    }

    @keyframes stokeFill{
      to{ 
        fill:#fff;
        fill-opacity:1;
        stroke: transparent;
      }
    }
    p{
      color: #fff;
      text-align: center;
    }
  }
  .links{
    width: 0;
	  height: 0;
    bottom: 0px;
    left:0;
	  border-top: 100px solid transparent;
	  border-left:  50vw solid #fff;
	  border-bottom: 0px solid transparent;
    position: absolute;
  }
  .rechts{
    width: 0;
	  height: 0;
    bottom: 0px;
    right:0;
    border-top: 100px solid transparent;
	  border-right: 50vw solid #fff;
	  border-bottom: 0px solid transparent;
    position: absolute;
  }
    
}
.filler{
  height:1000px;
}

website-header-svg-animation.markdown

Website Header SVG Animation

A Pen by Beibit Sakhanov on CodePen.

License.