Creating Animated Text Using SVG

Creating Animated Text Using SVG

This tutorial demonstrates how to create stunning animated text effects using SVG, perfect for decorating blog headers or creating eye-catching titles.
Live Demo:

Created with:
HTML / CSS / JavaScript
About the Code:
This is a beautiful animated text effect created using SVG technology.
Browser Compatibility: Chrome, Edge, Firefox, Opera, Safari

Implementation Guide

1. Add CSS

svg { 
  width: 100%;
  height: auto;
}

/* Text styling with pattern and thicker 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); /* Apply glow filter */
}

<link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet"/>

2. Add JavaScript

<script>/*<![CDATA[*/
  // Animation loop for stroke effect
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 animation immediately and loop
restartAnimation();
setInterval(restartAnimation, 10000);
/*]]>*/</script>

3. Add HTML where you want to display the animation

<svg viewBox="0 0 800 200">
  <!-- Define pattern for the text -->
  <defs>
    <!-- Define glow filter -->
    <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>

  <!-- Text with pattern and glow applied -->
  <text id="animatedText" x="50" y="150">YOUR TEXT HERE</text>
</svg>