Tạo văn bản hoạt hình sử dụng SVG

Bài viết này hướng dẫn cách tạo văn bản động hoạt hình sử dụng svg để trang trí hoặc tạo tiêu đề blog....
Demo:

Được làm bằng:
HTML / CSS / Javascript
Về mã:
Đây là một hiệu ứng văn bản động tuyệt đẹp được tạo bằng SVG.
Trình duyệt tương thích: Chrome, Edge, Firefox, Opera, Safari

Cách thực hiện

1- Thêm css

svg { 
  width: 100%;
  height: auto;
}
/* Tekststijl: vul met patroon, en gebruik dikkere stroke */
text {
  fill:#fff ;
  font-family: "Protest Guerrilla", sans-serif;
  font-size: 70px;
  letter-spacing: 5px;
  stroke: red;
  stroke-width: 3px;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  filter: url(#glowFilter); /* Voeg gloedfilter toe */
}
<link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet"/>

2- Thêm javascript

<script>/*<![CDATA[*/
  // js is for the animation loop for the strokes
const textElement = document.getElementById("animatedText");

function restartAnimation() {
  textElement.style.transition = "none";
  textElement.style.strokeDashoffset = "0";

  setTimeout(() => {
    textElement.style.transition = "stroke-dashoffset 3s ease";
    textElement.style.strokeDashoffset = "1000";
  }, 50);
}

// Start de animatie direct en in een loop
restartAnimation();
setInterval(restartAnimation, 10000);
/*]]>*/</script>

3- Thêm HTML vào vị trí muốn hiển thị

<svg viewBox="0 0 800 200">
  <!-- Definieer een patroon voor de tekst -->
  <defs>
    <!-- Definieer gloedfilter -->
    <filter id="glowFilter" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blurred" />
      <feOffset in="blurred" dx="0" dy="0" result="offsetBlurred" />
      <feFlood flood-color="cyan" result="glowColor" />
      <feComposite in="glowColor" in2="offsetBlurred" operator="in" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- Tekst waarop het patroon en de gloed worden toegepast -->
  <text id="animatedText" x="50" y="150">THỦ THUẬT BLOGSPOT</text>
</svg>