<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Liquid Texture ~ code likenull</title>
</head>
<body>
<svg viewbox="0 0 100 20">
  <defs>
    <linearGradient id="gradient">
      <stop color="#000"/>
    </linearGradient>
    <pattern id="wave" x="0" y="-0.5" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <path id="wavePath" d="M-50 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)"> 
        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="1.5s"
            type="translate"
            from="0,0"
            to="40,0"
            repeatCount="indefinite" />
      </path>
    </pattern>
  </defs>
  <text text-anchor="middle" x="50" y="15" font-size="17" fill="white" fill-opacity="0.1">Liquid text</text>
  <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)"  fill-opacity="1">Liqiuid text</text>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
  </script>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@900&display=swap');

body,html{margin:0;padding:0;height:100%;}
body{
  background: #e065e6;
  background-size:cover;
  font-family: 'Londrina Solid', cursive;
  font-color: blue;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
svg{font-weight:bold;max-width:600px;height:100%;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.