<div id="text-spot">
      <svg id="rainbow" height='100' width='200'>
        <circle class='colored-circle' cx='100' cy='100' fill='transparent' r='20' stroke-width='10px' stroke='#fc03a1'></circle>
        <circle class='colored-circle' cx='100' cy='100' fill='transparent' r='40' stroke-width='10px' stroke='#0367fc'></circle>
        <circle class='colored-circle' cx='100' cy='100' fill='transparent' r='60' stroke-width='10px' stroke='#fcba03'></circle>
        <circle class='colored-circle' cx='100' cy='100' fill='transparent' r='80' stroke-width='10px' stroke='#fc0339'></circle>
      </svg>
      <div id="inner-text">

      </div>
  
  <form id="custom-text-form">
        <input type="text" id="custom-text" placeholder="customize this text">
        <input type="submit" value="go!">
      </form>
    </div>

@keyframes rainbow {
        from {
          opacity: 1;
        }

        to {
          stroke-dasharray: 601.5;
          opacity: 1;
        }
      }

      @keyframes letter-animation {
        0% {
          transform: rotate(-20deg) translateY(-40px) scale(1);
          opacity: 1;
        }

        20% {
          transform: rotate(-20deg) translateY(-60px) scale(1.3);
        }

        100% {
          transform: rotate(0deg) translateY(0) scale(1);
          opacity: 1;
        }
      }

      body {
        background: rgb(38, 34, 44);
        margin: 0;
        padding: 0
      }

      #inner-text {
        position: relative;
        z-index: 1;
      }

      #text-spot {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .letter {
        display: inline-block;
        animation-name: letter-animation;
        animation-duration: 300ms;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        transform: rotate(-10deg) translateY(-20px);
        opacity: 0;
        font-family: 'Londrina Solid', cursive;
        text-transform: uppercase;
        color: white;
        font-size: 100px;
        text-shadow: 0 3px 0 black;
      }

      circle {
        opacity: 0;
        animation-duration: 1000ms;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
      }

      circle:nth-child(4) {
        stroke-dasharray: 251.5;
      }

      circle:nth-child(3) {
        stroke-dasharray: 188.5;
      }

      circle:nth-child(2) {
        stroke-dasharray: 125.5;
      }

      circle:nth-child(1) {
        stroke-dasharray: 62.5;
      }

      circle:nth-child(0) {
        stroke-dasharray: .5;
      }

 document.addEventListener("DOMContentLoaded", function () {
        var circleElements = Array.from(document.getElementsByTagName('circle'));
        var circleParentNode;

        function drawText(word) {
          word = word || 'Rainbow';

          var wordArray = word.split('');
          var innerTextElement = document.getElementById('inner-text');
          innerTextElement.innerHTML = '';
          var fontElement = document.getElementById('font');
          var colorIndex = 0;
          var colors = [
            '#fc0339',
            '#fc4103',
            '#fcba03',
            '#83d13f',
            '#0367fc',
            '#4d2bbd',
            '#fc03a1',
          ];

          circleElements.forEach(function (circle, index) {
            circleParentNode = circleParentNode || circle.parentNode;
            circleParentNode.removeChild(circle);
            circle.style['animation-name'] = '';
          });

          wordArray.forEach(function(letter, index) {
            var span = document.createElement('span');
            span.textContent = letter;
            span.className = 'letter';
            span.style['animation-delay'] = (400 * index) + 'ms';
            span.style['color'] = colors[colorIndex];
            innerTextElement.appendChild(span);

            colorIndex++;
            if (colorIndex >= colors.length) {
              colorIndex = 0;
            }
          });

          circleElements.forEach(function (circle, index) {
            circleParentNode.appendChild(circle);
            circle.style['animation-name'] = 'rainbow';

            var delay = (wordArray.length + (circleElements.length - index));

            circle.style['animation-delay'] = 400 * delay + 'ms';

          });
        }

        document.getElementById('custom-text-form').addEventListener('submit', function (e) {
          e.preventDefault();
          e.stopPropagation();

          drawText(document.getElementById('custom-text').value);
        });

        drawText();
      });