Create a Stunning Animated Cloud Generator with SVG & CSS

Bringing Abstract Landscapes to Life

Imagine a world where the atmosphere is both abstract and natural. A world where you can change the mood of a scene with just a few tweaks. Sounds fascinating, right? This article will guide you through the process of creating realistic clouds using CSS and SVG from scratch.

Prerequisites

Before we dive in, make sure you have:

• A working knowledge of CSS
• A working knowledge of SVGs
• A working knowledge of React
• A text editor

What are Realistic Clouds?

Realistic clouds are constantly-changing clouds that appear lifelike onscreen. They should look and behave just like real clouds. To achieve this, we’ll use CSS box-shadow and the CSS and SVG filter properties.

The Power of SVGs

Scalable Vector Graphics (SVGs) are a standard graphics file format for rendering two-dimensional images on the internet. They have unique superpowers that allow you to automatically optimize any picture for any screen size without distortion. SVGs are perfect for making clouds due to their many elements, which can be manipulated to mimic the organic look of clouds.

How SVGs Work

SVGs work by defining multiple aspects of an image. Let’s create a simple HTML template that will have some adjustable SVG properties:


<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="white" />
</svg>


In this example, the SVG tag provides specific properties that aid in creating the desired shape. We’ll use these properties to create our cloud components.

Creating Realistic Clouds

To create realistic clouds, we’ll use CSS box-shadow and the CSS and SVG filter properties. Let’s explore what these two terms mean.

Box-Shadow

Box-shadow is a CSS property that allows you to add one or more shadows to an HTML element. It accepts two to five values, depending on the user’s use case:

• offsetX and offsetY specify the position of the shadow on the horizontal and vertical axes, respectively.
• blurRadius specifies the amount of blur, describing how sharp or blurry the shadow is.
• spreadRadius deals with two values. The positive value increases the size of the shadow, while the negative value decreases it.

The Filter Property and Element

The filter property adds visual or graphical effects to an HTML element. These are commonly used to adjust images, borders, or backgrounds. To define filters, SVG employs the element. The element uses the id attribute to identify it uniquely. Filters are defined within elements and then referenced by their ids by graphics elements.

Project Setup

We’ll use Create React App to generate a starter template. Open your terminal and type the following command:


npx create-react-app realistic-cloud-generator


This will create a folder called realistic-cloud-generator and generate a starter template. After a successful installation, open the project in your preferred text editor.

Creating Cloud Components

Create a file inside the parent src folder called Home.jsx, then copy and paste in the code below:

“`jsx
import React, { useState } from ‘eact’;
import Cloud from ‘./components/Cloud’;

function Home() {
const [range, setRange] = useState(10);

return (

);
}

export default Home;
“`

Making the Clouds Look Realistic

Each filter includes FeTurbulence and FaDisplacementMap. FeTurbulence is an SVG filter that generates an image using the Perlin turbulence function. It allows artificial textures such as clouds or marble to be combined on the element associated with it. FaDisplacementMap is used to dimensionally displace image content by using a displacement map.

Animating and Adding Cloud Variants

To make the value dynamic, which will allow us to create different cloud variants, we’ll pass the range value into the displacementMap scale value and the seed of the feTurbulence, which changes based on the number we get from the range.

Launching the App

Type the following command to launch a development server that will be rendered in the browser of your choice:


npm start


And That’s It!

We’ve created a cloud generator application with minimal effort by exploring the realm of SVG using React. We saw the effect of displacementMap, turbulence, scale, and seed, which can be used with the range props to change the input dynamically and create realistic moving clouds.