Creating Engaging Blob Animations with CSS and SVG | Dynamic HTML/CSS Blob Animation Effects

Published on Feb 22, 2024

Hello everyone and welcome to LSET Tech Bites. In this video, we’re going to build a Blob Generator app using HTML, CSS, and JavaScript. Let’s start by breaking down the HTML code.

First, we have the HTML5 doctype declaration at the beginning, which sets the document type and language.

Next, in the <head> section, we have a viewport meta tag that controls how the layout looks on different devices. Title tags set the title of a webpage, which is “Blob Maker” in this case. We also have a link to import the “Roboto Mono” font from Google Fonts and a link to an external stylesheet called “styles.css.”

Moving on to the body of the HTML, we have a container <div> that wraps the entire content. Inside the container, there are several nested <div> elements with classes like “output”, “dimensions”, “sliders”, and “box”. These are likely used for structuring and styling the different sections of the app.

Within the “dimensions” <div>, we have two input fields for height and width labelled with “Height” and “Width” respectively. The default values for these inputs are both set to 200.

Following that, we have a “sliders” <div> which contains four input elements of type “range”. These are likely meant for adjusting some parameters of the blob shape using sliders. 

Lastly, there’s an input field with the id “css-code” set to read-only and a “Copy” button wrapped in a box <div>. These elements may be used to display and copy the CSS code for the generated blob.

CSS

Now let’s move on to the Design Part, we’re going to delve into the Cascading Style Sheets (CSS) that brings our Blob Generator app to life. Let’s break down the CSS code and understand how each part contributes to the design of the app.

Starting with the universal selector *, we’re setting padding, margin, and box-sizing to create a consistent layout across all elements. The font-family “Roboto Mono” is applied to all elements with a default font weight of 400 and color of #010120.

 Next, we set the background color of the entire page with the body selector. Then, within the container class, we define the styling for our app’s main container, including its size, positioning, padding, and border radius.

The output class contains the styling for the displayed area of the generated blob. It has a specific height and width, background color, padding, and a grid layout to centre the blob.

The #blob selector is used to style the actual blob element. Here, we set its height, width, background gradient, and box shadow to give it a dynamic and appealing appearance.

Moving on to the dimensions class, we use flexbox to layout the height and width input fields evenly with some spacing.

The sliders class is defined for styling the input range elements that are likely used to adjust parameters of the blob shape. It uses flexbox and gap properties to align the sliders vertically and with adequate spacing.

The box class styles the box containing the CSS code input field and the “Copy” button. It’s structured using flexbox and margins for centering and spacing.

Lastly, we have styles for input[type=”range”] to customise the sliders, including appearance, track, thumb, and other visual properties.

This CSS code, when combined with the previously discussed HTML structure and the upcoming JavaScript, will result in a fully functional Blob Generator app. Now, let’s move on to the JavaScript part to bring interactivity to our app.

JavaScript

We will delve into the JavaScript code that provides the functionality for creating and customising the blob shape. Let’s break down the JavaScript code and understand how each part contributes to the interactivity of the app.

First, we have the declaration for the outputCode variable, which stores the reference to the element with the id “css-code” in the HTML document. This element is where the generated CSS code for the blob will be displayed.

Next, we select all input elements of type “range” and “number” and attach event listeners to them. When the values of these inputs change, the createBlob function is called.

The createBlob function calculates the values of the sliders and input fields and uses them to determine the border radius and size of the blob. It then updates the CSS properties of the blob element and displays the generated border-radius code in the output area.

Additionally, an event listener is attached to the “Copy” button, so when it’s clicked, the content of the output area is selected, copied to the clipboard, and an alert is shown telling the user that the code has been copied.

Overall, this JavaScript code enables the user to interact with the app by adjusting the blob’s shape and size, and then easily copying the generated CSS code.

When combined with the previously discussed HTML and CSS structure, this JavaScript functionality completes the Blob Generator app, allowing users to dynamically create and customise blob shapes. With this final piece in place, our app is now ready for use.

That’s all for this video. In the next video, we’ll discuss something exciting. Until then, don’t forget to subscribe to our channel for more tech insights.

Our Latest Blog

Fundamentals of Scala Programming

Mastering the Fundamentals of Scala Programming: A Complete Guide to Functional Programming

Introduction to Scala Programming Scala programming has gained immense popularity in recent years thanks to...
Read More
Java Programming

Java Basics for Beginners: A Step-by-Step Guide to Mastering Java Programming

Introduction to Java programming Java, a versatile and extensively utilised programming language, is popular among...
Read More
Entity Relationship Diagrams (ERD)

Entity Relationship Diagrams (ERD): A Comprehensive Guide

Introduction to Entity Relationship Diagrams (ERD) Entity Relationship Diagrams (ERD) are powerful tools used in...
Read More