css & svg 实现 波浪 覆盖文字效果

需要 svg

<svg class="wave-svg"
    xmlns="http://www.w3.org/2000/svg" id="738255fe-a9fa-4a5e-963a-8e97f59370ad" data-name="3-waves" viewBox="0 0 600 215.43">
    <path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" transform="translate(-76 -985)" fill="#ffffff"></path>
</svg>

代码 react + styled-component

import { FC, ReactElement } from "react";
import styled, { keyframes } from "styled-components";

interface IProps {
  content?: string;
}

const WaveText: FC<IProps> = ({ content = "HELLO" }): ReactElement => {
  return (
    <Container>
      <Hello content={content}>{content}</Hello>
      <TempText>{content}</TempText>
    </Container>
  );
};

export default WaveText;

const Container = styled.div`
  width: 6rem;
  height: 3rem;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const animate = keyframes`
    0%{
      background-position-x: 0;
    }
    
    50%{
      background-position-y: 26px;
    }
    
    100%{
      background-position-x: -6rem;
      background-position-y: -2px;
    }
`;

const Hello = styled.span<{ content: string }>`
  font-size: 1.5rem;
  background: url("/wave.svg") no-repeat;
  background-size: 12rem;
  animation: ${animate} 3s ease-out infinite running;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  font-weight: bold;
  ::before {
    content: ${props => props.content};
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px transparent;
  }
`;

const TempText = styled.span`
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  z-index: -1;
`;