Разработка - Анимированный текст SVG | Все для вебмастера

Пишем код HTML:

HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet">
<svg viewBox="0 0 800 200">
  <!-- Definieer een patroon voor de tekst -->
  <defs>
    <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="400" height="400">
      <image href="https://iili.io/20FHSCN.png" x="0" y="0" width="400" height="400" />
    </pattern>

    <!-- 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">web-zones.ru</text>
</svg>

Пишем стиль:

CSS:

body {
  background-color: #000;
}

/* Basisstijl voor het SVG-element */
svg {
  position: absolute;
  top: 30%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

/* Tekststijl: vul met patroon, en gebruik dikkere stroke */
text {
  fill: url(#imagePattern);
  font-family: "Protest Guerrilla", sans-serif;
  font-size: 50px;
  letter-spacing: 5px;
  stroke: rgb(130, 217, 252);
  stroke-width: 1px;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  filter: url(#glowFilter); /* Voeg gloedfilter toe */
}

Пишем код js:

JavaScript:

// 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);

Получаем такой результат:

Реакции: Stiksar, alex54, hacker и ещё 1 человек

Разработка Анимированный текст SVG

Ещё ресурсы от baltun