Cara Membuat Teks SVG Animasi Stroke Pattern Bergerak Dengan Css

Efek animasi stroke pattern pada teks memang menarik, apalagi bisa bergerak dan hanya dibuat dengan html dan css. Cara untuk membuatnya juga cukup mudah, kita tidak perlu susah-susah menggunakan javascript. Warna dan pola juga bisa anda atur sesuai dengan keinginan anda sendiri. Untuk membuatnya, mari kita ikuti langkah-langkahnya.

Untuk jenis stroke kita perlu menduplikasi teks sebanyak warna yang digunakan. Cara terbaik untuk membuat ini adalah dengan menggunakan simbol :

<svg viewBox="0 0 600 300">

  <!-- Symbol -->
  <symbol id="s-text">
    <text text-anchor="middle"
            x="50%" y="50%" dy=".35em">
        Text
     </text>
  </symbol>

  <!-- Duplicate symbols -->
  <use xlink:href="#s-text" class="text"
            ></use>
  <use xlink:href="#s-text" class="text"
            ></use>
  <use xlink:href="#s-text" class="text"
            ></use>
  <use xlink:href="#s-text" class="text"
            ></use>
  <use xlink:href="#s-text" class="text"
            ></use>

</svg>

Dan ini adalah bagaimana kita dapat mengontrol warna dan animasi :

$colors: #F2385A, #F5A503, #E9F1DF, #56D9CD, #3AA1BF;
$max: length($colors);
$dash: 70;
$dash-gap: 10;
$dash-space: $dash * ($max - 1) + $dash-gap * $max;
$time: 6s;
$time-step: $time/$max;

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: $dash $dash-space;
  stroke-dashoffset: 0;
  animation: stroke $time infinite linear;

  @for $item from 1 through $max {
    &:nth-child(#{$max}n + #{$item}){
      $color: nth($colors, $item);
      stroke: $color;
      animation-delay: -($time-step * $item);
    }
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -($dash + $dash-gap) * $max;
  }
}

Dan hasilnya ada dalam dalam CSS berikut :

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #F5A503;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  animation-delay: -6s;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

Untuk setiap simbol kita menetapkan penundaan animasi individu, sehingga bagian-bagian dari stroke tidak menumpuk di satu tempat tetapi menyebar melalui kontur letter. Dengan metode ini teks dapat ditata menggunakan CSS. Kita juga dapat memilih dan menyalin teks. Keuntungan lain adalah bahwa SVG memiliki dukungan browser yang benar-benar baik. Jadi untuk menciptakan animasi semacam ini, SVG adalah salah satu pilihan terbaik.

Kelemahan menggunakan SVG adalah pembatasan kemampuan untuk mengelola teks. Misalnya, kata-kata dalam teks tidak pecah ketika teks memenuhi batas dokumen. Kita dapat menggunakan beberapa trik untuk mendapatkan jeda baris, tetapi dalam kasus ini teks mungkin hanya berhenti di tengah kata. Jadi metode ini lebih tepat untuk teks pendek dan logo.