<div class="site-container">
  <svg width="400" height="120" id="wavy-text">
    <g>
      <text y="50%" class="char">
        H
      </text>
      <text y="50%" x="20%" class="char">
        e
      </text>
      <text y="50%" x="40%" class="char">
        l
      </text>
      <text y="50%" x="60%" class="char">
        l
      </text>
      <text y="50%" x="80%" class="char">
        o
      </text>
    </g>
  </svg>
</div>
@import "https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap";
:root {
  --wavy-text-body-bg-color: #c44569;
  --wavy-text-body-color: #fff;
  --wavy-text-font-family: "Fascinate Inline", sans-serif;
  --wavy-text-animation-speed: 1s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font: 1em/160% sans-serif;
  margin: 0;
  background-color: var(--wavy-text-body-bg-color);
  color: var(--wavy-text-body-color);
}

svg {
  fill: currentColor;
  max-width: 100%;
  vertical-align: baseline;
}

.site-container {
  padding: 2em;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

#wavy-text {
  font-family: var(--wavy-text-font-family);
  font-size: 72px;
}

#wavy-text .char {
  transform: translateY(0);
  transform-origin: center;
  animation: wavyText var(--wavy-text-animation-speed) ease-in-out infinite;
}

#wavy-text .char:nth-child(1) {
  animation-delay: 100ms;
}

#wavy-text .char:nth-child(2) {
  animation-delay: 200ms;
}

#wavy-text .char:nth-child(3) {
  animation-delay: 300ms;
}

#wavy-text .char:nth-child(4) {
  animation-delay: 400ms;
}

#wavy-text .char:nth-child(5) {
  animation-delay: 500ms;
}

@keyframes wavyText {
  0%,
  100% {
    transform: translateY(0);
  }
  25%,
  50% {
    transform: translateY(10%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.