HTML / CSS 

Use our online code editor for free. launch editor >>

Creating Liquid text effect.

HTML CSS/07-2021/Creating-liquid-text-effect

Here we will create this type of effect:- 

Extensions and Imports,
We have to import some javascript and fonts. 

1. Londrina font
2. jquery.min.js(3.1.1)
 
code:-




Here I have set background to cover assuming this will be displayed all over the screen as body and if you want it in a div the just deploy full css in div class. And to make SVG responsive I have set max-width to 600px you can replace it with your choice.

In body we have our SVG, if you are new to CSS and SVG then don't mess with this code but you can change it according to you as per your wish.
Here you can change duration(dur) and number of counts(repeatCount). 

At the end make sure to have a attached Jquery.min.js. 

Here is full code. 
code-

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Liquid Texture ~ code likenull</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght[email protected]&display=swap');

body,html
body{
background: #af17e9;
background-size:cover;
font-family: 'Londrina Solid', cursive;
font-color: blue;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
</style>
</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'>
</body>
</html>



Atul kumar singh

Web Developer, blogger, chief editor. Telling and discovering the world of tech. Known as like null, and loves tech. 

Atul Kumar Singh

Author / CEO

Browse our featured topics

© Copyright 2022 codelikenull. All Rights Reserved.