Fluid Liquid Circle Animation

Procedure

Step 1: Setting Up the HTML Structure

Start by setting up the basic HTML structure. This includes the <head> section, where you'll add the page title, styles, and fonts, and the <body> section, where the main content, including the animated circle, will be displayed.

Step 2: Importing Google Fonts

In the <style> tag, import fonts from Google Fonts to add personality to the page. Use fonts like Poppins, Kaushan Script, and Belanosima for different parts of the page to give it a stylish and modern look.

Step 3: Styling the Background

Apply a soft gradient as the background of the page to create a gentle, flowing effect. Center the content on the page both vertically and horizontally to focus the user’s attention on the animated circle in the middle of the screen.

Step 4: Creating the Fluid Circle

Create the fluid circle by adding a <div> element with a specific class to control its shape and appearance. This circle will be large, centered, and styled with a slightly irregular shape to give it a liquid-like look.

Step 5: Adding Keyframes for Animation

Define the animation with keyframes to give the circle a morphing effect. The keyframes adjust the shape of the circle at different intervals, creating a smooth, flowing motion that repeats continuously for a dynamic, organic look.

Step 6: Adding a Disclaimer Text

At the bottom of the animation, add a small disclaimer text with a link for credit. Style this text to match the overall theme of the page, with a hover effect on the link for an interactive touch.

Step 7: Testing and Adjusting

Once everything is set up, preview the page to make sure the animation flows smoothly. Adjust the animation speed, colors, or text styles as needed to achieve the desired effect. This will complete your fluid liquid circle animation with a seamless, dynamic visual impact.

Following these steps will help you create a visually engaging and fluid animation. Feel free to experiment with different shapes, colors, and timings to make it uniquely yours!

Html

Css

@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
    body
    {
        margin: 0;
        display: flex;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        font-family: "Poppins", sans-serif;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(120deg, #cfe1ff 0%, #daf3ff 100%);
    }
    .darksoul-fluid-liquid--circle
    {
        position: absolute;
        margin: auto;
        width: 350px;
        height: 350px;
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        border-radius: 39% 61% 55% 45% / 44% 37% 63% 56% ;
        animation: fluid-anim 5s infinite linear;
        z-index: 1;
    }
     
    @keyframes fluid-anim
    {
        0%
        {
            border-radius: 39% 61% 55% 45% / 44% 37% 63% 56% ;
        }
        25%
        {
            border-radius: 45% 55% 48% 52% / 60% 36% 64% 40% ;
        }
        50%
        {
            border-radius: 56% 44% 28% 72% / 46% 63% 37% 54% ;
        }
        75%
        {
            border-radius: 62% 38% 37% 63% / 39% 32% 68% 61% ;
        }
        100%
        {
            border-radius: 39% 61% 55% 45% / 44% 37% 63% 56% ;
        }
    }
    
    .disclaimer
    {
        margin: auto; 
        margin-bottom: 50px;
        width: fit-content;
        color: rgb(0, 0, 0);
        text-align: center;
        font-family: 'Belanosima', sans-serif;
    }
    .disclaimer a
    {
        text-decoration: none;
        color: #202020;
        font-family: "Kaushan Script", cursive;
        font-weight: 900;
    }
    .disclaimer a:hover
    {
        text-decoration: overline;
    }

Fluid Liquid Circle Animation CodePen

CodePen

Procedure

Html

Css

Js

Output Screenshot