Анимация с линиями для текста

Интересная анимация для текста, которая имитирует хаотичное движение линий. Например, подойдет для оформления заголовков любом сайте.

Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт,
который генерирует движение линий по математической формуле.
Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов.

HTML разметка

<div class="textcontainer">
   <span class="particletext lines"><b>Линии</b></span>
</div>

CSS оформление

body .textcontainer {
  padding: 40px 0;
  text-align: center;
}
body .particletext {
  text-align: center;
  font-size: 48px;
  position: relative;
}
body .particletext.lines > .particle {
  position: absolute;
  background-color: rgba(244, 67, 54, 0.5);
  -webkit-animation: lines 3s linear infinite;
          animation: lines 3s linear infinite;
}

@-webkit-keyframes lines {
  0%, 50%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  75% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes lines {
  0%, 50%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  75% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

JS скрипт

function initparticles() {
   lines();
}

function lines() {
   $.each($(".particletext.lines"), function(){
      var linecount = ($(this).width()/50)*10;
      for(var i = 0; i <= linecount; i++) {
         $(this).append('');
      }
   });
}

jQuery.rnd = function(m,n) {
      m = parseInt(m);
      n = parseInt(n);
      return Math.floor( Math.random() * (n - m + 1) ) + m;
}

initparticles();