5

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML ='';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    var char = content.charAt(i);
    letter.innerHTML = char===" "?"&nbsp;":char;
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;


for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }

  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }

  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
		cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
		nw[i].className = 'letter in';
  }, 340+(i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML ='';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    var char = content.charAt(i);
    letter.innerHTML = char===" "?"&nbsp;":char;
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);
:root {
  --mainColor: #fff;
}

body{
  background-color: #252627;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page{
  width: 100%;
  height: 100%;
  position: absolute;
}

.bglogo{
  position: absolute;
  top:20%;
  right: 15vh;
  height: 65vh;
  width: 65vh;
  z-index: 0;
}


path {
  fill: #252627;
  stroke: #00ffdc;
  animation: my_animation 2s linear forwards, filling .2s linear 2s forwards;
  stroke-dasharray: 400; /* need to ... */
  stroke-dashoffset: 400; /* ... match */
}

@keyframes my_animation {
  to {stroke-dashoffset: 0}
}

@keyframes filling {
  to {fill: #ff0046}
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 40px;
}

.text {
  position: absolute;
  left: 10%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 40%;
  max-height: 90%;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  color: white;
  font-size: 64px;
}


.word {
  position: absolute;
  width: 100%;
  opacity: 0;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}


p {
  color: var(--mainColor);
  text-decoration: none;
}

p:hover {
  color: transparent;
  -webkit-text-stroke: 2px var(--mainColor);
}

@supports not(-webkit-text-stroke: 2px red) {
  p:hover {
    text-shadow:
      3px 3px 0 var(--mainColor),
      -1px -1px 0 var(--mainColor),
      1px -1px 0 var(--mainColor),
      -1px 1px 0 var(--mainColor),
      1px 1px 0 var(--mainColor);
  }

|

    1

    1

    var words = document.getElementsByClassName('word');
    var wordArray = [];
    var currentWord = 0;
    
    
    for (var i = 0; i < words.length; i++) {
      splitLetters(words[i]);
    }
    
    function changeWord() {
      var cw = wordArray[currentWord];
      var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
      for (var i = 0; i < cw.length; i++) {
        animateLetterOut(cw, i);
      }
    
      for (var i = 0; i < nw.length; i++) {
        nw[i].className = 'letter behind';
        nw[0].parentElement.style.opacity = 1;
        animateLetterIn(nw, i);
      }
    
      currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
    }
    
    function animateLetterOut(cw, i) {
      setTimeout(function() {
    		cw[i].className = 'letter out';
      }, i*80);
    }
    
    function animateLetterIn(nw, i) {
      setTimeout(function() {
    		nw[i].className = 'letter in';
      }, 340+(i*80));
    }
    
    function splitLetters(word) {
      var content = word.innerHTML;
      word.innerHTML ='';
      var letters = [];
      for (var i = 0; i < content.length; i++) {
        var letter = document.createElement('span');
        letter.className = 'letter';
        var char = content.charAt(i);
        if(char === " ")
            letter = document.createElement('br');
        else
            letter.innerHTML = char;
        word.appendChild(letter);
        letters.push(letter);
      }
    
      wordArray.push(letters);
    }
    
    changeWord();
    setInterval(changeWord, 4000);
    :root {
      --mainColor: #fff;
    }
    
    body{
      background-color: #252627;
      margin: 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .page{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    
    .bglogo{
      position: absolute;
      top:20%;
      right: 15vh;
      height: 65vh;
      width: 65vh;
      z-index: 0;
    }
    
    
    path {
      fill: #252627;
      stroke: #00ffdc;
      animation: my_animation 2s linear forwards, filling .2s linear 2s forwards;
      stroke-dasharray: 400; /* need to ... */
      stroke-dashoffset: 400; /* ... match */
    }
    
    @keyframes my_animation {
      to {stroke-dashoffset: 0}
    }
    
    @keyframes filling {
      to {fill: #ff0046}
    }
    
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
    
    body {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 40px;
    }
    
    .text {
      position: absolute;
      left: 10%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 40%;
      max-height: 90%;
    }
    
    p {
      display: inline-block;
      vertical-align: top;
      margin: 0;
      color: white;
      font-size: 64px;
    }
    
    
    .word {
      position: absolute;
      width: 100%;
      opacity: 0;
      white-space: nowrap;
    }
    
    
    .letter:not(br) {
      display: inline-block;
      position: relative;
      float: left;
      transform: translateZ(25px);
      transform-origin: 50% 50% 25px;
    }
    br {
     clear:left;
    }
    .letter.out:not(br) {
      transform: rotateX(90deg);
      transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    
    .letter.behind:not(br) {
      transform: rotateX(-90deg);
    }
    
    .letter.in:not(br) {
      transform: rotateX(0deg);
      transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .wisteria {
      color: #8e44ad;
    }
    
    .belize {
      color: #2980b9;
    }
    
    .pomegranate {
      color: #c0392b;
    }
    
    .green {
      color: #16a085;
    }
    
    .midnight {
      color: #2c3e50;
    }
    
    
    p {
      color: var(--mainColor);
      text-decoration: none;
    }
    
    p:hover {
      color: transparent;
      -webkit-text-stroke: 2px var(--mainColor);
    }
    
    @supports not(-webkit-text-stroke: 2px red) {
      p:hover {
        text-shadow:
          3px 3px 0 var(--mainColor),
          -1px -1px 0 var(--mainColor),
          1px -1px 0 var(--mainColor),
          -1px 1px 0 var(--mainColor),
          1px 1px 0 var(--mainColor);
      }

    var words = document.getElementsByClassName('word');
    var wordArray = [];
    var currentWord = 0;
    var spaces = 2;
    
    
    for (var i = 0; i < words.length; i++) {
      splitLetters(words[i]);
    }
    
    function changeWord() {
      var cw = wordArray[currentWord];
      var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
      for (var i = 0; i < cw.length; i++) {
        animateLetterOut(cw, i);
      }
    
      for (var i = 0; i < nw.length; i++) {
        nw[i].className = 'letter behind';
        nw[0].parentElement.style.opacity = 1;
        animateLetterIn(nw, i);
      }
    
      currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
    }
    
    function animateLetterOut(cw, i) {
      setTimeout(function() {
    		cw[i].className = 'letter out';
      }, i*80);
    }
    
    function animateLetterIn(nw, i) {
      setTimeout(function() {
    		nw[i].className = 'letter in';
      }, 340+(i*80));
    }
    
    
    function splitLetters(word) {
      var content = word.innerHTML;
      word.innerHTML ='';
      var letters = [];
      var space = 0;
      for (var i = 0; i < content.length; i++) {
        var letter = document.createElement('span');
        letter.className = 'letter';
        var char = content.charAt(i);
        if(char === " ") {
            if(space == spaces)
                letter = document.createElement('br');
            else
                letter.innerHTML = "&nbsp;";
            space++;       
        }
        else
            letter.innerHTML = char;
        word.appendChild(letter);
        letters.push(letter);
      }
    
      wordArray.push(letters);
    }
    
    changeWord();
    setInterval(changeWord, 4000);
    :root {
      --mainColor: #fff;
    }
    
    body{
      background-color: #252627;
      margin: 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .page{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    
    .bglogo{
      position: absolute;
      top:20%;
      right: 15vh;
      height: 65vh;
      width: 65vh;
      z-index: 0;
    }
    
    
    path {
      fill: #252627;
      stroke: #00ffdc;
      animation: my_animation 2s linear forwards, filling .2s linear 2s forwards;
      stroke-dasharray: 400; /* need to ... */
      stroke-dashoffset: 400; /* ... match */
    }
    
    @keyframes my_animation {
      to {stroke-dashoffset: 0}
    }
    
    @keyframes filling {
      to {fill: #ff0046}
    }
    
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
    
    body {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 40px;
    }
    
    .text {
      position: absolute;
      left: 10%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 40%;
      max-height: 90%;
    }
    
    p {
      display: inline-block;
      vertical-align: top;
      margin: 0;
      color: white;
      font-size: 64px;
    }
    
    
    .word {
      position: absolute;
      width: 100%;
      opacity: 0;
      white-space: nowrap;
    }
    
    .letter:not(br) {
      display: inline-block;
      position: relative;
      float: left;
      transform: translateZ(25px);
      transform-origin: 50% 50% 25px;
    }
    
    br {
     clear:left;
    }
    
    .letter.out:not(br) {
      transform: rotateX(90deg);
      transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    
    .letter.behind:not(br) {
      transform: rotateX(-90deg);
    }
    
    .letter.in:not(br) {
      transform: rotateX(0deg);
      transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .wisteria {
      color: #8e44ad;
    }
    
    .belize {
      color: #2980b9;
    }
    
    .pomegranate {
      color: #c0392b;
    }
    
    .green {
      color: #16a085;
    }
    
    .midnight {
      color: #2c3e50;
    }
    
    
    p {
      color: var(--mainColor);
      text-decoration: none;
    }
    
    p:hover {
      color: transparent;
      -webkit-text-stroke: 2px var(--mainColor);
    }
    
    @supports not(-webkit-text-stroke: 2px red) {
      p:hover {
        text-shadow:
          3px 3px 0 var(--mainColor),
          -1px -1px 0 var(--mainColor),
          1px -1px 0 var(--mainColor),
          -1px 1px 0 var(--mainColor),
          1px 1px 0 var(--mainColor);
      }

    |