Learn how to design a website with curved or wavy backgrounds using HTML and CSS. Then take things to the next level by adding a morphing SVG animation with JavaScript https://fireship.io/lessons/wavy-backgrounds/

#webdev #css #tutorial

🔗 Resources

Code https://github.com/fireship-io/wavy-curvey-blobby-website
Shape Driver https://www.shapedivider.app/
Haikei App https://haikei.app/

📚 Chapters

00:00 Wavy Web Design
00:49 Flat HTML Website
03:26 CSS Wave
05:51 CSS Bubble 
06:21 SVG Wave
07:15 SVG Layered Wave 
08:58 Animated Blob


 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T13:59:56.211Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
797eb8b8-ff40-4d58-bdc8-a4fa9842bc80
e01041eb35cea936d95c5ffbb1848668a2ec87ce6ba303ed2465de7c8aeb8d73
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
They say real developers like curves.
And, personally, I love myself a curvaceous website, where each content section transitions elegantly with some waves, blobs, or ripples.
In today's beginner friendly tutorial, you'll learn how to turn your flat, boring design into a beautiful curvy one that will turn people's heads.
We'll start with a basic HTML homepage that has a hero at the top, a few content sections, and lay footer at the bottom.
Then you'll learn a variety of techniques to add curves to these elements, like CSS border radius, SVG backgrounds, and we'll even make some animated warping blobs with JavaScript.
That may seem complicated, but it's actually much easier than it looks because there's some amazing tools out there that can make our lives much easier that you've probably never heard of.
And And I'll show you a bunch of cool productivity and CSS tips along the way.
If you're new here, like and subscribe and follow along with the full written tutorial on Fireship IO.
To get Started with this project, all you need to do is open up an editor like Versus Code and create a plain HTML file.
Inside that file, type an exclamation point followed by tab to generate some initial HTML boilerplate.
That's called an Emmett snippet, and it's built into Versus Code, and we can actually use it to generate a bunch with sections of content as well.
In this demo, we have 8 sections of content, so we'll type section times 8, then a right angle bracket to add a child to that element, which in this case will be an h one with the text of nice curves.
Notice how I have it wrapped in parentheses because after that, I have a plus sign to add a child next to the h one, which itself will be a paragraph with some dummy text inside of it.
Now, go ahead and hit tab and Emmet will automatically generate all that HTML for you.
And now that we have a basic HTML page, let's go ahead and serve it in the browser.
Here's a little trick to gracefully serve your app locally.
Open up the command line, and And if you have Node.
Js installed on your machine, you can run npx serve.
That'll link you to local host 5000 where you should now be able to see the website.
And if you don't have Node.
Js installed, you can just copy the path to the HTML file and paste it into your browser.
Currently, the website looks terrible.
So let's go to Google Fonts to improve it with a custom font.
Select any font you want and it will provide an HTML snippet that can be pasted into the head of the document.
Then right below that, I'm opening up a style tag where we'll define all of the CSS styles for this project.
Let's start by targeting the body of the content and setting its margin 0.
Then we'll define our font family as the one we selected from Google Fonts.
The text color will be light and the background will be something dark.
From there, we can target the section element which represents a block of content in the web page.
You'll notice I'm setting the position to relative.
This won't change the appearance of it, but it allows its children to be absolutely positioned within it, which is something that will come into play later as we position our backgrounds.
Then after that, we can use CSS flexbox locks to make it a flexible container, allowing us to easily center the content in each section.
Here's a little side tip.
When working with Flexbox in the browser, right click and choose inspect element.
That'll bring up the browser dev tools, and you'll notice buttons here that you can click to change the actual properties on Flexbox without having to memorize all different properties available in CSS.
Then after that, we can give each section a minimum height of 400 pixels.
And for padding, I'll add a 100 pixels to the top and bottom.
And for the left and right, I'll use a flexible unit called view width that will give me 20% of the actual view port width, and that'll just make the design a little more responsive to different screen in sizes.
Our design is already looking a lot better, but now let's go ahead and add a few utility classes to distinguish between different colors.
We can add this class to any section to set the background to that color.
Now we're ready to implement our first curve.
And to do that, I'm going to add an empty div below the content with a class of curve.
Normally, it's not a good practice to have empty divs lying around, but you could add content inside of here if you want it to sit on top of the curve itself.
Now Now this curve will be implemented with plain CSS, but I have to warn you that this is the most difficult example in this entire video.
Don't get discouraged if it seems too complicated because the upcoming examples are way easier to implement.
I'm demonstrating this example primarily to show you that it is possible to implement fairly complex curves with nothing but CSS.
The curve itself will have a position of absolute and be placed at the bottom of its parent div.
Remember, we set the parent section element to position relative, which is important here because it places the curve inside of the section as opposed to the main body of the page.
That gives us an empty div to work with.
Now we can target the before and after pseudo elements, which are basically like invisible HTML elements that we can target with our CSS.
And in this example, you can think of each one as a circle that we will intersect together to create the illusion of a curve.
The content of the element will be an to string, then it will have a position of absolute, then the interesting thing is that it has a border radius with 2 values.
If it was just one value, it would way to perfect circle, but when you add a second value, it creates an ellipse where the first argument represents the vertical radius and the second, the horizontal radius.
Then after that, we'll set its width and height.
Now at this point, we can apply the exact same styles to the after element as well.
That'll give us 2 circles to work with, and now the tricky part is getting them to line up properly to look like a curve.
The first one will be our dark circle, and the after element is the blue circle.
The tricky part is putting the circles in the proper location, which will likely take a lot of trial and error.
I'm using the transform property along with translate, which is just a fancy way to say move the circle to a different location.
The arguments to translate represent the x and y axis.
The final thing I'll do is on after element at z index negative one, which ensures the darker element will sit on top of the lighter one.
Let's go ahead and open up the page in the browser and the curve should now be visible.
If you look closely, you may notice that it's not exactly perfect.
What you'll likely need to do is open up the browser dev tools and play with the values to move them around until they get perfectly aligned.
Now another issue is that the current implementation is causing the content to overflow horizontally.
That's not good, but an easy way to fix the problem is to set the overflow x property to hidden on the parent element.
That gets the job done, but I think CSS is more well suited for curves that have a single ellipse or circle.
Let's go back down to the HTML and add a class of bubble to one section and a class of dark to another section.
We can easily add a curve here by only targeting the after pseudo element and giving it an elliptical border radius on the top left and top right, followed by absolute positioning to put it in the appropriate location.
This example is very similar to the last one in many ways, but far more simple.
I would definitely use CSS for something like that, but for more complex curves, let's take a look at how scalable vector graphics or SVG can simplify our lives.
First, let's go into our HTML and add a class of red to one of the sections.
The cool thing about SVG is that we can use a design tool or a purpose built web app like this one called Shape Divider to automatically to draw the SVG and provide the required CSS to add it to the UI instantly.
Experiment with different settings to get the design you're going for, then click the download button and copy the HTML snippet.
It contains an SVG graphic that we can simply paste into the bottom of one of our sections.
It has a div with an automatically generated class name, which I'm going to change to wave just to simplify things here.
From there, we can go back to the tool and copy the CSS code.
Paste that inside the style tags, then highlight the class name, then right click to change all the occurrences to the wave class.
Now if we go back to the browser, We have a wave that looks better than the first one with far less effort.
But now let's take things to the next level by using yet another free tool called Hi k.
This web app has a really beautiful UI and is dedicated to generating SVG backgrounds automatically.
I'm going to use the layered waves option and put the waves on the top.
You can tweak things here to look however you want.
The only important thing here is that you select colors that go with the colors in your actual CSS code.
The other thing I'm going to do here is change the aspect ratio.
You can almost think of this graphic as like a fancy border or separator between content sections, so it needs to be long and skinny.
Make a note of that aspect ratio because we're going to need it later.
After you're happy with the appearance, go ahead and click the button to download the file as an SVG into your project.
From there, let's go into the CSS and create a class called spacer.
We'll use a relatively new CSS feature called aspect ratio.
Instead of trying to manage the width and height with the element, we can use the aspect ratio property and set it to whatever value we used for the aspect ratio on the image, then we'll use the image as a background on whatever element has this class.
The image should take up the entire element, so we'll set background repeat to no repeat, position it in the center, and give it a background size of cover.
Then we may want to use this class multiple times, so I'm creating a second class that defines the ground image as the SVG graphic that we just downloaded.
From there, we can go down to the HTML and add an empty div with these two classes in order to apply that image as the transition between 2 sections.
Now, again, using an empty div like this is sometimes considered a bad practice, but I do think it's acceptable in this case, and it's definitely the easiest way to get the job done.
The end result is this really cool looking section.
With just a couple of SVG graphics and some CSS, we can really make this design stand out, but we're not done yet.
For the grand finale, we're going to bring in JavaScript to create an animated morphing SVG to really make the web page come to life.
In the HTML, I'm adding a class of pink and then adding those spacer layers on either side of it.
And the top one has a class of flip because we need that one to do a one The flip class in the CSS is just a utility that will rotate the element by a 180 degrees.
It should look something like this, but now let's add a rotating blob right in the middle.
To generate the blob, I'll go back to the Hi k app and create 2 random graphics with the blob shape.
I've downloaded them into the project, but what I actually need is the source code from the raw SVG file.
I'm taking the code from one of the blobs and pasting it down inside of the section.
What you wanna do next Is right click and hit format document so we can see all the properties on it clearly.
Inside the SVG code, you'll notice a rect or rectangle element, go ahead and delete that one.
What we're interested in is the path, which is the shape of the blob itself.
That gives us one blob in the SVG, but we actually want a second blob in there as well.
So we're gonna go into our other blob and find the g element, which means group, and go ahead and and copy that element from the raw SVG code.
Once copied, go back to the SVG in the HTML and paste it as the labeling to the other group.
I realized that was very cumbersome and it would be a lot easier if you used a design tool like Figma, but that's beyond the scope of this video.
At this point, you should see 2 blobs on top of each other.
Now, in order to animate 1 blob into the other, we need to give each path an ID, which we'll call blob 1 and blob 2.
Now, normally, where a morph animation is pretty difficult to pull off.
But I discovered this library called a cute.
Js or maybe coute.
Js, not sure how to pronounce it.
It feels kind of similar to GreenSock if you ever using animation library like that.
And to install it, all we have to do is add the script tag for the CDN link to the head of the document.
Then down at the bottom of the section, we'll add a script that references the global object cute with a k and its from to method.
It'll use blob 1 as the starting SVG and then animate to the blob 2 SVG.
And as a final argument, we can add an object with some options on it, like the duration, which will be 3,000 milliseconds, and also the yo yo option, which will have it go back and forth between the 2 animation state.
And lastly, call animation start, and that's all it takes to create an SVG morphing animation with JavaScript.
Just a couple of other little points here, we need to make the second blob have a visibility of hidden so it's not visible when the animation first starts.
And then I'm also going to add some basic positioning CSS here to position the blob directly underneath the main content in that section.
The end result is this beautiful, curvaceous website.
I'm gonna go ahead and wrap things up there.
But if you like content like this, upgrade to a pro membership on FireShip bio to get access to all of my premium videos.
Thanks for watching, and I will see you in the next one.

Speaker 0: They say real developers like curves. And, personally, I love myself a curvaceous website, where each content section transitions elegantly with some waves, blobs, or ripples. In today's beginner friendly tutorial, you'll learn how to turn your flat, boring design into a beautiful curvy one that will turn people's heads. We'll start with a basic HTML homepage that has a hero at the top, a few content sections, and lay footer at the bottom. Then you'll learn a variety of techniques to add curves to these elements, like CSS border radius, SVG backgrounds, and we'll even make some animated warping blobs with JavaScript.

That may seem complicated, but it's actually much easier than it looks because there's some amazing tools out there that can make our lives much easier that you've probably never heard of. And And I'll show you a bunch of cool productivity and CSS tips along the way. If you're new here, like and subscribe and follow along with the full written tutorial on Fireship IO. To get Started with this project, all you need to do is open up an editor like Versus Code and create a plain HTML file. Inside that file, type an exclamation point followed by tab to generate some initial HTML boilerplate.

That's called an Emmett snippet, and it's built into Versus Code, and we can actually use it to generate a bunch with sections of content as well. In this demo, we have 8 sections of content, so we'll type section times 8, then a right angle bracket to add a child to that element, which in this case will be an h one with the text of nice curves. Notice how I have it wrapped in parentheses because after that, I have a plus sign to add a child next to the h one, which itself will be a paragraph with some dummy text inside of it. Now, go ahead and hit tab and Emmet will automatically generate all that HTML for you. And now that we have a basic HTML page, let's go ahead and serve it in the browser.

Here's a little trick to gracefully serve your app locally. Open up the command line, and And if you have Node. Js installed on your machine, you can run npx serve. That'll link you to local host 5000 where you should now be able to see the website. And if you don't have Node.

Js installed, you can just copy the path to the HTML file and paste it into your browser. Currently, the website looks terrible. So let's go to Google Fonts to improve it with a custom font. Select any font you want and it will provide an HTML snippet that can be pasted into the head of the document. Then right below that, I'm opening up a style tag where we'll define all of the CSS styles for this project.

Let's start by targeting the body of the content and setting its margin 0. Then we'll define our font family as the one we selected from Google Fonts. The text color will be light and the background will be something dark. From there, we can target the section element which represents a block of content in the web page. You'll notice I'm setting the position to relative.

This won't change the appearance of it, but it allows its children to be absolutely positioned within it, which is something that will come into play later as we position our backgrounds. Then after that, we can use CSS flexbox locks to make it a flexible container, allowing us to easily center the content in each section. Here's a little side tip. When working with Flexbox in the browser, right click and choose inspect element. That'll bring up the browser dev tools, and you'll notice buttons here that you can click to change the actual properties on Flexbox without having to memorize all different properties available in CSS.

Then after that, we can give each section a minimum height of 400 pixels. And for padding, I'll add a 100 pixels to the top and bottom. And for the left and right, I'll use a flexible unit called view width that will give me 20% of the actual view port width, and that'll just make the design a little more responsive to different screen in sizes. Our design is already looking a lot better, but now let's go ahead and add a few utility classes to distinguish between different colors. We can add this class to any section to set the background to that color.

Now we're ready to implement our first curve. And to do that, I'm going to add an empty div below the content with a class of curve. Normally, it's not a good practice to have empty divs lying around, but you could add content inside of here if you want it to sit on top of the curve itself. Now Now this curve will be implemented with plain CSS, but I have to warn you that this is the most difficult example in this entire video. Don't get discouraged if it seems too complicated because the upcoming examples are way easier to implement.

I'm demonstrating this example primarily to show you that it is possible to implement fairly complex curves with nothing but CSS. The curve itself will have a position of absolute and be placed at the bottom of its parent div. Remember, we set the parent section element to position relative, which is important here because it places the curve inside of the section as opposed to the main body of the page. That gives us an empty div to work with. Now we can target the before and after pseudo elements, which are basically like invisible HTML elements that we can target with our CSS.

And in this example, you can think of each one as a circle that we will intersect together to create the illusion of a curve. The content of the element will be an to string, then it will have a position of absolute, then the interesting thing is that it has a border radius with 2 values. If it was just one value, it would way to perfect circle, but when you add a second value, it creates an ellipse where the first argument represents the vertical radius and the second, the horizontal radius. Then after that, we'll set its width and height. Now at this point, we can apply the exact same styles to the after element as well.

That'll give us 2 circles to work with, and now the tricky part is getting them to line up properly to look like a curve. The first one will be our dark circle, and the after element is the blue circle. The tricky part is putting the circles in the proper location, which will likely take a lot of trial and error. I'm using the transform property along with translate, which is just a fancy way to say move the circle to a different location. The arguments to translate represent the x and y axis.

The final thing I'll do is on after element at z index negative one, which ensures the darker element will sit on top of the lighter one. Let's go ahead and open up the page in the browser and the curve should now be visible. If you look closely, you may notice that it's not exactly perfect. What you'll likely need to do is open up the browser dev tools and play with the values to move them around until they get perfectly aligned. Now another issue is that the current implementation is causing the content to overflow horizontally.

That's not good, but an easy way to fix the problem is to set the overflow x property to hidden on the parent element. That gets the job done, but I think CSS is more well suited for curves that have a single ellipse or circle. Let's go back down to the HTML and add a class of bubble to one section and a class of dark to another section. We can easily add a curve here by only targeting the after pseudo element and giving it an elliptical border radius on the top left and top right, followed by absolute positioning to put it in the appropriate location. This example is very similar to the last one in many ways, but far more simple.

I would definitely use CSS for something like that, but for more complex curves, let's take a look at how scalable vector graphics or SVG can simplify our lives. First, let's go into our HTML and add a class of red to one of the sections. The cool thing about SVG is that we can use a design tool or a purpose built web app like this one called Shape Divider to automatically to draw the SVG and provide the required CSS to add it to the UI instantly. Experiment with different settings to get the design you're going for, then click the download button and copy the HTML snippet. It contains an SVG graphic that we can simply paste into the bottom of one of our sections.

It has a div with an automatically generated class name, which I'm going to change to wave just to simplify things here. From there, we can go back to the tool and copy the CSS code. Paste that inside the style tags, then highlight the class name, then right click to change all the occurrences to the wave class. Now if we go back to the browser, We have a wave that looks better than the first one with far less effort. But now let's take things to the next level by using yet another free tool called Hi k.

This web app has a really beautiful UI and is dedicated to generating SVG backgrounds automatically. I'm going to use the layered waves option and put the waves on the top. You can tweak things here to look however you want. The only important thing here is that you select colors that go with the colors in your actual CSS code. The other thing I'm going to do here is change the aspect ratio.

You can almost think of this graphic as like a fancy border or separator between content sections, so it needs to be long and skinny. Make a note of that aspect ratio because we're going to need it later. After you're happy with the appearance, go ahead and click the button to download the file as an SVG into your project. From there, let's go into the CSS and create a class called spacer. We'll use a relatively new CSS feature called aspect ratio.

Instead of trying to manage the width and height with the element, we can use the aspect ratio property and set it to whatever value we used for the aspect ratio on the image, then we'll use the image as a background on whatever element has this class. The image should take up the entire element, so we'll set background repeat to no repeat, position it in the center, and give it a background size of cover. Then we may want to use this class multiple times, so I'm creating a second class that defines the ground image as the SVG graphic that we just downloaded. From there, we can go down to the HTML and add an empty div with these two classes in order to apply that image as the transition between 2 sections. Now, again, using an empty div like this is sometimes considered a bad practice, but I do think it's acceptable in this case, and it's definitely the easiest way to get the job done.

The end result is this really cool looking section. With just a couple of SVG graphics and some CSS, we can really make this design stand out, but we're not done yet. For the grand finale, we're going to bring in JavaScript to create an animated morphing SVG to really make the web page come to life. In the HTML, I'm adding a class of pink and then adding those spacer layers on either side of it. And the top one has a class of flip because we need that one to do a one The flip class in the CSS is just a utility that will rotate the element by a 180 degrees.

It should look something like this, but now let's add a rotating blob right in the middle. To generate the blob, I'll go back to the Hi k app and create 2 random graphics with the blob shape. I've downloaded them into the project, but what I actually need is the source code from the raw SVG file. I'm taking the code from one of the blobs and pasting it down inside of the section. What you wanna do next Is right click and hit format document so we can see all the properties on it clearly.

Inside the SVG code, you'll notice a rect or rectangle element, go ahead and delete that one. What we're interested in is the path, which is the shape of the blob itself. That gives us one blob in the SVG, but we actually want a second blob in there as well. So we're gonna go into our other blob and find the g element, which means group, and go ahead and and copy that element from the raw SVG code. Once copied, go back to the SVG in the HTML and paste it as the labeling to the other group.

I realized that was very cumbersome and it would be a lot easier if you used a design tool like Figma, but that's beyond the scope of this video. At this point, you should see 2 blobs on top of each other. Now, in order to animate 1 blob into the other, we need to give each path an ID, which we'll call blob 1 and blob 2. Now, normally, where a morph animation is pretty difficult to pull off. But I discovered this library called a cute.

Js or maybe coute. Js, not sure how to pronounce it. It feels kind of similar to GreenSock if you ever using animation library like that. And to install it, all we have to do is add the script tag for the CDN link to the head of the document. Then down at the bottom of the section, we'll add a script that references the global object cute with a k and its from to method.

It'll use blob 1 as the starting SVG and then animate to the blob 2 SVG. And as a final argument, we can add an object with some options on it, like the duration, which will be 3,000 milliseconds, and also the yo yo option, which will have it go back and forth between the 2 animation state. And lastly, call animation start, and that's all it takes to create an SVG morphing animation with JavaScript. Just a couple of other little points here, we need to make the second blob have a visibility of hidden so it's not visible when the animation first starts. And then I'm also going to add some basic positioning CSS here to position the blob directly underneath the main content in that section.

The end result is this beautiful, curvaceous website. I'm gonna go ahead and wrap things up there. But if you like content like this, upgrade to a pro membership on FireShip bio to get access to all of my premium videos. Thanks for watching, and I will see you in the next one.
They say real developers like curves. And, personally, I love myself a curvaceous website, where each content section transitions elegantly with some waves, blobs, or ripples. In today's beginner friendly tutorial, you'll learn how to turn your flat, boring design into a beautiful curvy one that will turn people's heads. We'll start with a basic HTML homepage that has a hero at the top, a few content sections, and lay footer at the bottom. Then you'll learn a variety of techniques to add curves to these elements, like CSS border radius, SVG backgrounds, and we'll even make some animated warping blobs with JavaScript. That may seem complicated, but it's actually much easier than it looks because there's some amazing tools out there that can make our lives much easier that you've probably never heard of.
graphic design
animation
software development
And And I'll show you a bunch of cool productivity and CSS tips along the way. If you're new here, like and subscribe and follow along with the full written tutorial on Fireship IO. To get Started with this project, all you need to do is open up an editor like Versus Code and create a plain HTML file. Inside that file, type an exclamation point followed by tab to generate some initial HTML boilerplate. That's called an Emmett snippet, and it's built into Versus Code, and we can actually use it to generate a bunch with sections of content as well. In this demo, we have 8 sections of content, so we'll type section times 8, then a right angle bracket to add a child to that element, which in this case will be an h one with the text of nice curves.
programming
blogging
software development
Notice how I have it wrapped in parentheses because after that, I have a plus sign to add a child next to the h one, which itself will be a paragraph with some dummy text inside of it. Now, go ahead and hit tab and Emmet will automatically generate all that HTML for you. And now that we have a basic HTML page, let's go ahead and serve it in the browser. Here's a little trick to gracefully serve your app locally. Open up the command line, and And if you have Node. Js installed on your machine, you can run npx serve. That'll link you to local host 5000 where you should now be able to see the website. And if you don't have Node. Js installed, you can just copy the path to the HTML file and paste it into your browser. Currently, the website looks terrible. So let's go to Google Fonts to improve it with a custom font. Select any font you want and it will provide an HTML snippet that can be pasted into the head of the document.
Then right below that, I'm opening up a style tag where we'll define all of the CSS styles for this project. Let's start by targeting the body of the content and setting its margin 0. Then we'll define our font family as the one we selected from Google Fonts. The text color will be light and the background will be something dark.
fashion
From there, we can target the section element which represents a block of content in the web page. You'll notice I'm setting the position to relative. This won't change the appearance of it, but it allows its children to be absolutely positioned within it, which is something that will come into play later as we position our backgrounds. Then after that, we can use CSS flexbox locks to make it a flexible container, allowing us to easily center the content in each section. Here's a little side tip. When working with Flexbox in the browser, right click and choose inspect element. That'll bring up the browser dev tools, and you'll notice buttons here that you can click to change the actual properties on Flexbox without having to memorize all different properties available in CSS. Then after that, we can give each section a minimum height of 400 pixels. And for padding, I'll add a 100 pixels to the top and bottom. And for the left and right, I'll use a flexible unit called view width that will give me 20% of the actual view port width, and that'll just make the design a little more responsive to different screen in sizes.
Our design is already looking a lot better, but now let's go ahead and add a few utility classes to distinguish between different colors. We can add this class to any section to set the background to that color. Now we're ready to implement our first curve. And to do that, I'm going to add an empty div below the content with a class of curve. Normally, it's not a good practice to have empty divs lying around, but you could add content inside of here if you want it to sit on top of the curve itself. Now Now this curve will be implemented with plain CSS, but I have to warn you that this is the most difficult example in this entire video. Don't get discouraged if it seems too complicated because the upcoming examples are way easier to implement. I'm demonstrating this example primarily to show you that it is possible to implement fairly complex curves with nothing but CSS. The curve itself will have a position of absolute and be placed at the bottom of its parent div. Remember, we set the parent section element to position relative, which is important here because it places the curve inside of the section as opposed to the main body of the page.
graphic design
geometry
That gives us an empty div to work with. Now we can target the before and after pseudo elements, which are basically like invisible HTML elements that we can target with our CSS.
And in this example, you can think of each one as a circle that we will intersect together to create the illusion of a curve. The content of the element will be an to string, then it will have a position of absolute, then the interesting thing is that it has a border radius with 2 values.
geometry
mathematics
If it was just one value, it would way to perfect circle, but when you add a second value, it creates an ellipse where the first argument represents the vertical radius and the second, the horizontal radius. Then after that, we'll set its width and height. Now at this point, we can apply the exact same styles to the after element as well. That'll give us 2 circles to work with, and now the tricky part is getting them to line up properly to look like a curve. The first one will be our dark circle, and the after element is the blue circle. The tricky part is putting the circles in the proper location, which will likely take a lot of trial and error. I'm using the transform property along with translate, which is just a fancy way to say move the circle to a different location. The arguments to translate represent the x and y axis. The final thing I'll do is on after element at z index negative one, which ensures the darker element will sit on top of the lighter one.
geometry
mathematics
Let's go ahead and open up the page in the browser and the curve should now be visible. If you look closely, you may notice that it's not exactly perfect. What you'll likely need to do is open up the browser dev tools and play with the values to move them around until they get perfectly aligned. Now another issue is that the current implementation is causing the content to overflow horizontally. That's not good, but an easy way to fix the problem is to set the overflow x property to hidden on the parent element.
That gets the job done, but I think CSS is more well suited for curves that have a single ellipse or circle. Let's go back down to the HTML and add a class of bubble to one section and a class of dark to another section. We can easily add a curve here by only targeting the after pseudo element and giving it an elliptical border radius on the top left and top right, followed by absolute positioning to put it in the appropriate location. This example is very similar to the last one in many ways, but far more simple. I would definitely use CSS for something like that, but for more complex curves, let's take a look at how scalable vector graphics or SVG can simplify our lives. First, let's go into our HTML and add a class of red to one of the sections. The cool thing about SVG is that we can use a design tool or a purpose built web app like this one called Shape Divider to automatically to draw the SVG and provide the required CSS to add it to the UI instantly. Experiment with different settings to get the design you're going for, then click the download button and copy the HTML snippet. It contains an SVG graphic that we can simply paste into the bottom of one of our sections. It has a div with an automatically generated class name, which I'm going to change to wave just to simplify things here.
geometry
animation
graphic design
visualization
From there, we can go back to the tool and copy the CSS code. Paste that inside the style tags, then highlight the class name, then right click to change all the occurrences to the wave class. Now if we go back to the browser, We have a wave that looks better than the first one with far less effort.
But now let's take things to the next level by using yet another free tool called Hi k. This web app has a really beautiful UI and is dedicated to generating SVG backgrounds automatically. I'm going to use the layered waves option and put the waves on the top. You can tweak things here to look however you want.
visualization
animation
The only important thing here is that you select colors that go with the colors in your actual CSS code. The other thing I'm going to do here is change the aspect ratio. You can almost think of this graphic as like a fancy border or separator between content sections, so it needs to be long and skinny. Make a note of that aspect ratio because we're going to need it later. After you're happy with the appearance, go ahead and click the button to download the file as an SVG into your project.
graphic design
clothing
From there, let's go into the CSS and create a class called spacer. We'll use a relatively new CSS feature called aspect ratio. Instead of trying to manage the width and height with the element, we can use the aspect ratio property and set it to whatever value we used for the aspect ratio on the image, then we'll use the image as a background on whatever element has this class.
The image should take up the entire element, so we'll set background repeat to no repeat, position it in the center, and give it a background size of cover. Then we may want to use this class multiple times, so I'm creating a second class that defines the ground image as the SVG graphic that we just downloaded. From there, we can go down to the HTML and add an empty div with these two classes in order to apply that image as the transition between 2 sections.
graphic design
animation
visualization
Now, again, using an empty div like this is sometimes considered a bad practice, but I do think it's acceptable in this case, and it's definitely the easiest way to get the job done. The end result is this really cool looking section. With just a couple of SVG graphics and some CSS, we can really make this design stand out, but we're not done yet. For the grand finale, we're going to bring in JavaScript to create an animated morphing SVG to really make the web page come to life. In the HTML, I'm adding a class of pink and then adding those spacer layers on either side of it. And the top one has a class of flip because we need that one to do a one The flip class in the CSS is just a utility that will rotate the element by a 180 degrees.
animation
graphic design
It should look something like this, but now let's add a rotating blob right in the middle. To generate the blob, I'll go back to the Hi k app and create 2 random graphics with the blob shape. I've downloaded them into the project, but what I actually need is the source code from the raw SVG file.
animation
I'm taking the code from one of the blobs and pasting it down inside of the section. What you wanna do next Is right click and hit format document so we can see all the properties on it clearly. Inside the SVG code, you'll notice a rect or rectangle element, go ahead and delete that one. What we're interested in is the path, which is the shape of the blob itself. That gives us one blob in the SVG, but we actually want a second blob in there as well. So we're gonna go into our other blob and find the g element, which means group, and go ahead and and copy that element from the raw SVG code.
Once copied, go back to the SVG in the HTML and paste it as the labeling to the other group. I realized that was very cumbersome and it would be a lot easier if you used a design tool like Figma, but that's beyond the scope of this video. At this point, you should see 2 blobs on top of each other. Now, in order to animate 1 blob into the other, we need to give each path an ID, which we'll call blob 1 and blob 2. Now, normally, where a morph animation is pretty difficult to pull off. But I discovered this library called a cute. Js or maybe coute. Js, not sure how to pronounce it. It feels kind of similar to GreenSock if you ever using animation library like that. And to install it, all we have to do is add the script tag for the CDN link to the head of the document.
animation
graphic design
visualization
Then down at the bottom of the section, we'll add a script that references the global object cute with a k and its from to method. It'll use blob 1 as the starting SVG and then animate to the blob 2 SVG. And as a final argument, we can add an object with some options on it, like the duration, which will be 3,000 milliseconds, and also the yo yo option, which will have it go back and forth between the 2 animation state. And lastly, call animation start, and that's all it takes to create an SVG morphing animation with JavaScript. Just a couple of other little points here, we need to make the second blob have a visibility of hidden so it's not visible when the animation first starts. And then I'm also going to add some basic positioning CSS here to position the blob directly underneath the main content in that section.
animation
graphic design
The end result is this beautiful, curvaceous website.
I'm gonna go ahead and wrap things up there. But if you like content like this, upgrade to a pro membership on FireShip bio to get access to all of my premium videos. Thanks for watching, and I will see you in the next one.
streaming
youtube
blogging
social media
They say real developers like curves. And, personally, I love myself a curvaceous website, where each content section transitions elegantly with some waves, blobs, or ripples. In today's beginner friendly tutorial, you'll learn how to turn your flat, boring design into a beautiful curvy one that will turn people's heads. We'll start with a basic HTML homepage that has a hero at the top, a few content sections, and lay footer at the bottom. Then you'll learn a variety of techniques to add curves to these elements, like CSS border radius, SVG backgrounds, and we'll even make some animated warping blobs with JavaScript. That may seem complicated, but it's actually much easier than it looks because there's some amazing tools out there that can make our lives much easier that you've probably never heard of. And And I'll show you a bunch of cool productivity and CSS tips along the way. If you're new here, like and subscribe and follow along with the full written tutorial on Fireship IO. To get Started with this project, all you need to do is open up an editor like Versus Code and create a plain HTML file. Inside that file, type an exclamation point followed by tab to generate some initial HTML boilerplate. That's called an Emmett snippet, and it's built into Versus Code, and we can actually use it to generate a bunch with sections of content as well. In this demo, we have 8 sections of content, so we'll type section times 8, then a right angle bracket to add a child to that element, which in this case will be an h one with the text of nice curves. Notice how I have it wrapped in parentheses because after that, I have a plus sign to add a child next to the h one, which itself will be a paragraph with some dummy text inside of it. Now, go ahead and hit tab and Emmet will automatically generate all that HTML for you. And now that we have a basic HTML page, let's go ahead and serve it in the browser. Here's a little trick to gracefully serve your app locally. Open up the command line, and And if you have Node. Js installed on your machine, you can run npx serve. That'll link you to local host 5000 where you should now be able to see the website. And if you don't have Node. Js installed, you can just copy the path to the HTML file and paste it into your browser. Currently, the website looks terrible. So let's go to Google Fonts to improve it with a custom font. Select any font you want and it will provide an HTML snippet that can be pasted into the head of the document. Then right below that, I'm opening up a style tag where we'll define all of the CSS styles for this project. Let's start by targeting the body of the content and setting its margin 0. Then we'll define our font family as the one we selected from Google Fonts. The text color will be light and the background will be something dark. From there, we can target the section element which represents a block of content in the web page. You'll notice I'm setting the position to relative. This won't change the appearance of it, but it allows its children to be absolutely positioned within it, which is something that will come into play later as we position our backgrounds. Then after that, we can use CSS flexbox locks to make it a flexible container, allowing us to easily center the content in each section. Here's a little side tip. When working with Flexbox in the browser, right click and choose inspect element. That'll bring up the browser dev tools, and you'll notice buttons here that you can click to change the actual properties on Flexbox without having to memorize all different properties available in CSS. Then after that, we can give each section a minimum height of 400 pixels. And for padding, I'll add a 100 pixels to the top and bottom. And for the left and right, I'll use a flexible unit called view width that will give me 20% of the actual view port width, and that'll just make the design a little more responsive to different screen in sizes. Our design is already looking a lot better, but now let's go ahead and add a few utility classes to distinguish between different colors. We can add this class to any section to set the background to that color. Now we're ready to implement our first curve. And to do that, I'm going to add an empty div below the content with a class of curve. Normally, it's not a good practice to have empty divs lying around, but you could add content inside of here if you want it to sit on top of the curve itself. Now Now this curve will be implemented with plain CSS, but I have to warn you that this is the most difficult example in this entire video. Don't get discouraged if it seems too complicated because the upcoming examples are way easier to implement. I'm demonstrating this example primarily to show you that it is possible to implement fairly complex curves with nothing but CSS. The curve itself will have a position of absolute and be placed at the bottom of its parent div. Remember, we set the parent section element to position relative, which is important here because it places the curve inside of the section as opposed to the main body of the page. That gives us an empty div to work with. Now we can target the before and after pseudo elements, which are basically like invisible HTML elements that we can target with our CSS. And in this example, you can think of each one as a circle that we will intersect together to create the illusion of a curve. The content of the element will be an to string, then it will have a position of absolute, then the interesting thing is that it has a border radius with 2 values. If it was just one value, it would way to perfect circle, but when you add a second value, it creates an ellipse where the first argument represents the vertical radius and the second, the horizontal radius. Then after that, we'll set its width and height. Now at this point, we can apply the exact same styles to the after element as well. That'll give us 2 circles to work with, and now the tricky part is getting them to line up properly to look like a curve. The first one will be our dark circle, and the after element is the blue circle. The tricky part is putting the circles in the proper location, which will likely take a lot of trial and error. I'm using the transform property along with translate, which is just a fancy way to say move the circle to a different location. The arguments to translate represent the x and y axis. The final thing I'll do is on after element at z index negative one, which ensures the darker element will sit on top of the lighter one. Let's go ahead and open up the page in the browser and the curve should now be visible. If you look closely, you may notice that it's not exactly perfect. What you'll likely need to do is open up the browser dev tools and play with the values to move them around until they get perfectly aligned. Now another issue is that the current implementation is causing the content to overflow horizontally. That's not good, but an easy way to fix the problem is to set the overflow x property to hidden on the parent element. That gets the job done, but I think CSS is more well suited for curves that have a single ellipse or circle. Let's go back down to the HTML and add a class of bubble to one section and a class of dark to another section. We can easily add a curve here by only targeting the after pseudo element and giving it an elliptical border radius on the top left and top right, followed by absolute positioning to put it in the appropriate location. This example is very similar to the last one in many ways, but far more simple. I would definitely use CSS for something like that, but for more complex curves, let's take a look at how scalable vector graphics or SVG can simplify our lives. First, let's go into our HTML and add a class of red to one of the sections. The cool thing about SVG is that we can use a design tool or a purpose built web app like this one called Shape Divider to automatically to draw the SVG and provide the required CSS to add it to the UI instantly. Experiment with different settings to get the design you're going for, then click the download button and copy the HTML snippet. It contains an SVG graphic that we can simply paste into the bottom of one of our sections. It has a div with an automatically generated class name, which I'm going to change to wave just to simplify things here. From there, we can go back to the tool and copy the CSS code. Paste that inside the style tags, then highlight the class name, then right click to change all the occurrences to the wave class. Now if we go back to the browser, We have a wave that looks better than the first one with far less effort. But now let's take things to the next level by using yet another free tool called Hi k. This web app has a really beautiful UI and is dedicated to generating SVG backgrounds automatically. I'm going to use the layered waves option and put the waves on the top. You can tweak things here to look however you want. The only important thing here is that you select colors that go with the colors in your actual CSS code. The other thing I'm going to do here is change the aspect ratio. You can almost think of this graphic as like a fancy border or separator between content sections, so it needs to be long and skinny. Make a note of that aspect ratio because we're going to need it later. After you're happy with the appearance, go ahead and click the button to download the file as an SVG into your project. From there, let's go into the CSS and create a class called spacer. We'll use a relatively new CSS feature called aspect ratio. Instead of trying to manage the width and height with the element, we can use the aspect ratio property and set it to whatever value we used for the aspect ratio on the image, then we'll use the image as a background on whatever element has this class. The image should take up the entire element, so we'll set background repeat to no repeat, position it in the center, and give it a background size of cover. Then we may want to use this class multiple times, so I'm creating a second class that defines the ground image as the SVG graphic that we just downloaded. From there, we can go down to the HTML and add an empty div with these two classes in order to apply that image as the transition between 2 sections. Now, again, using an empty div like this is sometimes considered a bad practice, but I do think it's acceptable in this case, and it's definitely the easiest way to get the job done. The end result is this really cool looking section. With just a couple of SVG graphics and some CSS, we can really make this design stand out, but we're not done yet. For the grand finale, we're going to bring in JavaScript to create an animated morphing SVG to really make the web page come to life. In the HTML, I'm adding a class of pink and then adding those spacer layers on either side of it. And the top one has a class of flip because we need that one to do a one The flip class in the CSS is just a utility that will rotate the element by a 180 degrees. It should look something like this, but now let's add a rotating blob right in the middle. To generate the blob, I'll go back to the Hi k app and create 2 random graphics with the blob shape. I've downloaded them into the project, but what I actually need is the source code from the raw SVG file. I'm taking the code from one of the blobs and pasting it down inside of the section. What you wanna do next Is right click and hit format document so we can see all the properties on it clearly. Inside the SVG code, you'll notice a rect or rectangle element, go ahead and delete that one. What we're interested in is the path, which is the shape of the blob itself. That gives us one blob in the SVG, but we actually want a second blob in there as well. So we're gonna go into our other blob and find the g element, which means group, and go ahead and and copy that element from the raw SVG code. Once copied, go back to the SVG in the HTML and paste it as the labeling to the other group. I realized that was very cumbersome and it would be a lot easier if you used a design tool like Figma, but that's beyond the scope of this video. At this point, you should see 2 blobs on top of each other. Now, in order to animate 1 blob into the other, we need to give each path an ID, which we'll call blob 1 and blob 2. Now, normally, where a morph animation is pretty difficult to pull off. But I discovered this library called a cute. Js or maybe coute. Js, not sure how to pronounce it. It feels kind of similar to GreenSock if you ever using animation library like that. And to install it, all we have to do is add the script tag for the CDN link to the head of the document. Then down at the bottom of the section, we'll add a script that references the global object cute with a k and its from to method. It'll use blob 1 as the starting SVG and then animate to the blob 2 SVG. And as a final argument, we can add an object with some options on it, like the duration, which will be 3,000 milliseconds, and also the yo yo option, which will have it go back and forth between the 2 animation state. And lastly, call animation start, and that's all it takes to create an SVG morphing animation with JavaScript. Just a couple of other little points here, we need to make the second blob have a visibility of hidden so it's not visible when the animation first starts. And then I'm also going to add some basic positioning CSS here to position the blob directly underneath the main content in that section. The end result is this beautiful, curvaceous website. I'm gonna go ahead and wrap things up there. But if you like content like this, upgrade to a pro membership on FireShip bio to get access to all of my premium videos. Thanks for watching, and I will see you in the next one.
They
they
say
say
real
real
developers
developers
like
like
curves.
curves
And,
and
personally,
personally
I
i
love
love
myself
myself
a
a
curvaceous
curvaceous
website,
website
where
where
each
each
content
content
section
section
transitions
transitions
elegantly
elegantly
with
with
some
some
waves,
waves
blobs,
blobs
or
or
ripples.
ripples
In
in
today's
today's
beginner
beginner
friendly
friendly
tutorial,
tutorial
you'll
you'll
learn
learn
how
how
to
to
turn
turn
your
your
flat,
flat
boring
boring
design
design
into
into
a
a
beautiful
beautiful
curvy
curvy
one
one
that
that
will
will
turn
turn
people's
people's
heads.
heads
We'll
we'll
start
start
with
with
a
a
basic
basic
HTML
html
homepage
homepage
that
that
has
has
a
a
hero
hero
at
at
the
the
top,
top
a
a
few
few
content
content
sections,
sections
and
and
lay
lay
footer
footer
at
at
the
the
bottom.
bottom
Then
then
you'll
you'll
learn
learn
a
a
variety
variety
of
of
techniques
techniques
to
to
add
add
curves
curves
to
to
these
these
elements,
elements
like
like
CSS
css
border
border
radius,
radius
SVG
svg
backgrounds,
backgrounds
and
and
we'll
we'll
even
even
make
make
some
some
animated
animated
warping
warping
blobs
blobs
with
with
JavaScript.
javascript
That
that
may
may
seem
seem
complicated,
complicated
but
but
it's
it's
actually
actually
much
much
easier
easier
than
than
it
it
looks
looks
because
because
there's
there's
some
some
amazing
amazing
tools
tools
out
out
there
there
that
that
can
can
make
make
our
our
lives
lives
much
much
easier
easier
that
that
you've
you've
probably
probably
never
never
heard
heard
of.
of
And
and
And
and
I'll
i'll
show
show
you
you
a
a
bunch
bunch
of
of
cool
cool
productivity
productivity
and
and
CSS
css
tips
tips
along
along
the
the
way.
way
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
follow
follow
along
along
with
with
the
the
full
full
written
written
tutorial
tutorial
on
on
Fireship
fireship
IO.
io
To
to
get
get
Started
started
with
with
this
this
project,
project
all
all
you
you
need
need
to
to
do
do
is
is
open
open
up
up
an
an
editor
editor
like
like
Versus
versus
Code
code
and
and
create
create
a
a
plain
plain
HTML
html
file.
file
Inside
inside
that
that
file,
file
type
type
an
an
exclamation
exclamation
point
point
followed
followed
by
by
tab
tab
to
to
generate
generate
some
some
initial
initial
HTML
html
boilerplate.
boilerplate
That's
that's
called
called
an
an
Emmett
emmett
snippet,
snippet
and
and
it's
it's
built
built
into
into
Versus
versus
Code,
code
and
and
we
we
can
can
actually
actually
use
use
it
it
to
to
generate
generate
a
a
bunch
bunch
with
with
sections
sections
of
of
content
content
as
as
well.
well
In
in
this
this
demo,
demo
we
we
have
have
8
8
sections
sections
of
of
content,
content
so
so
we'll
we'll
type
type
section
section
times
times
8,
8
then
then
a
a
right
right
angle
angle
bracket
bracket
to
to
add
add
a
a
child
child
to
to
that
that
element,
element
which
which
in
in
this
this
case
case
will
will
be
be
an
an
h
h
one
one
with
with
the
the
text
text
of
of
nice
nice
curves.
curves
Notice
notice
how
how
I
i
have
have
it
it
wrapped
wrapped
in
in
parentheses
parentheses
because
because
after
after
that,
that
I
i
have
have
a
a
plus
plus
sign
sign
to
to
add
add
a
a
child
child
next
next
to
to
the
the
h
h
one,
one
which
which
itself
itself
will
will
be
be
a
a
paragraph
paragraph
with
with
some
some
dummy
dummy
text
text
inside
inside
of
of
it.
it
Now,
now
go
go
ahead
ahead
and
and
hit
hit
tab
tab
and
and
Emmet
emmet
will
will
automatically
automatically
generate
generate
all
all
that
that
HTML
html
for
for
you.
you
And
and
now
now
that
that
we
we
have
have
a
a
basic
basic
HTML
html
page,
page
let's
let's
go
go
ahead
ahead
and
and
serve
serve
it
it
in
in
the
the
browser.
browser
Here's
here's
a
a
little
little
trick
trick
to
to
gracefully
gracefully
serve
serve
your
your
app
app
locally.
locally
Open
open
up
up
the
the
command
command
line,
line
and
and
And
and
if
if
you
you
have
have
Node.
node
Js
js
installed
installed
on
on
your
your
machine,
machine
you
you
can
can
run
run
npx
npx
serve.
serve
That'll
that'll
link
link
you
you
to
to
local
local
host
host
5000
5000
where
where
you
you
should
should
now
now
be
be
able
able
to
to
see
see
the
the
website.
website
And
and
if
if
you
you
don't
don't
have
have
Node.
node
Js
js
installed,
installed
you
you
can
can
just
just
copy
copy
the
the
path
path
to
to
the
the
HTML
html
file
file
and
and
paste
paste
it
it
into
into
your
your
browser.
browser
Currently,
currently
the
the
website
website
looks
looks
terrible.
terrible
So
so
let's
let's
go
go
to
to
Google
google
Fonts
fonts
to
to
improve
improve
it
it
with
with
a
a
custom
custom
font.
font
Select
select
any
any
font
font
you
you
want
want
and
and
it
it
will
will
provide
provide
an
an
HTML
html
snippet
snippet
that
that
can
can
be
be
pasted
pasted
into
into
the
the
head
head
of
of
the
the
document.
document
Then
then
right
right
below
below
that,
that
I'm
i'm
opening
opening
up
up
a
a
style
style
tag
tag
where
where
we'll
we'll
define
define
all
all
of
of
the
the
CSS
css
styles
styles
for
for
this
this
project.
project
Let's
let's
start
start
by
by
targeting
targeting
the
the
body
body
of
of
the
the
content
content
and
and
setting
setting
its
its
margin
margin
0.
0
Then
then
we'll
we'll
define
define
our
our
font
font
family
family
as
as
the
the
one
one
we
we
selected
selected
from
from
Google
google
Fonts.
fonts
The
the
text
text
color
color
will
will
be
be
light
light
and
and
the
the
background
background
will
will
be
be
something
something
dark.
dark
From
from
there,
there
we
we
can
can
target
target
the
the
section
section
element
element
which
which
represents
represents
a
a
block
block
of
of
content
content
in
in
the
the
web
web
page.
page
You'll
you'll
notice
notice
I'm
i'm
setting
setting
the
the
position
position
to
to
relative.
relative
This
this
won't
won't
change
change
the
the
appearance
appearance
of
of
it,
it
but
but
it
it
allows
allows
its
its
children
children
to
to
be
be
absolutely
absolutely
positioned
positioned
within
within
it,
it
which
which
is
is
something
something
that
that
will
will
come
come
into
into
play
play
later
later
as
as
we
we
position
position
our
our
backgrounds.
backgrounds
Then
then
after
after
that,
that
we
we
can
can
use
use
CSS
css
flexbox
flexbox
locks
locks
to
to
make
make
it
it
a
a
flexible
flexible
container,
container
allowing
allowing
us
us
to
to
easily
easily
center
center
the
the
content
content
in
in
each
each
section.
section
Here's
here's
a
a
little
little
side
side
tip.
tip
When
when
working
working
with
with
Flexbox
flexbox
in
in
the
the
browser,
browser
right
right
click
click
and
and
choose
choose
inspect
inspect
element.
element
That'll
that'll
bring
bring
up
up
the
the
browser
browser
dev
dev
tools,
tools
and
and
you'll
you'll
notice
notice
buttons
buttons
here
here
that
that
you
you
can
can
click
click
to
to
change
change
the
the
actual
actual
properties
properties
on
on
Flexbox
flexbox
without
without
having
having
to
to
memorize
memorize
all
all
different
different
properties
properties
available
available
in
in
CSS.
css
Then
then
after
after
that,
that
we
we
can
can
give
give
each
each
section
section
a
a
minimum
minimum
height
height
of
of
400
400
pixels.
pixels
And
and
for
for
padding,
padding
I'll
i'll
add
add
a
a
100
100
pixels
pixels
to
to
the
the
top
top
and
and
bottom.
bottom
And
and
for
for
the
the
left
left
and
and
right,
right
I'll
i'll
use
use
a
a
flexible
flexible
unit
unit
called
called
view
view
width
width
that
that
will
will
give
give
me
me
20%
20%
of
of
the
the
actual
actual
view
view
port
port
width,
width
and
and
that'll
that'll
just
just
make
make
the
the
design
design
a
a
little
little
more
more
responsive
responsive
to
to
different
different
screen
screen
in
in
sizes.
sizes
Our
our
design
design
is
is
already
already
looking
looking
a
a
lot
lot
better,
better
but
but
now
now
let's
let's
go
go
ahead
ahead
and
and
add
add
a
a
few
few
utility
utility
classes
classes
to
to
distinguish
distinguish
between
between
different
different
colors.
colors
We
we
can
can
add
add
this
this
class
class
to
to
any
any
section
section
to
to
set
set
the
the
background
background
to
to
that
that
color.
color
Now
now
we're
we're
ready
ready
to
to
implement
implement
our
our
first
first
curve.
curve
And
and
to
to
do
do
that,
that
I'm
i'm
going
going
to
to
add
add
an
an
empty
empty
div
div
below
below
the
the
content
content
with
with
a
a
class
class
of
of
curve.
curve
Normally,
normally
it's
it's
not
not
a
a
good
good
practice
practice
to
to
have
have
empty
empty
divs
divs
lying
lying
around,
around
but
but
you
you
could
could
add
add
content
content
inside
inside
of
of
here
here
if
if
you
you
want
want
it
it
to
to
sit
sit
on
on
top
top
of
of
the
the
curve
curve
itself.
itself
Now
now
Now
now
this
this
curve
curve
will
will
be
be
implemented
implemented
with
with
plain
plain
CSS,
css
but
but
I
i
have
have
to
to
warn
warn
you
you
that
that
this
this
is
is
the
the
most
most
difficult
difficult
example
example
in
in
this
this
entire
entire
video.
video
Don't
don't
get
get
discouraged
discouraged
if
if
it
it
seems
seems
too
too
complicated
complicated
because
because
the
the
upcoming
upcoming
examples
examples
are
are
way
way
easier
easier
to
to
implement.
implement
I'm
i'm
demonstrating
demonstrating
this
this
example
example
primarily
primarily
to
to
show
show
you
you
that
that
it
it
is
is
possible
possible
to
to
implement
implement
fairly
fairly
complex
complex
curves
curves
with
with
nothing
nothing
but
but
CSS.
css
The
the
curve
curve
itself
itself
will
will
have
have
a
a
position
position
of
of
absolute
absolute
and
and
be
be
placed
placed
at
at
the
the
bottom
bottom
of
of
its
its
parent
parent
div.
div
Remember,
remember
we
we
set
set
the
the
parent
parent
section
section
element
element
to
to
position
position
relative,
relative
which
which
is
is
important
important
here
here
because
because
it
it
places
places
the
the
curve
curve
inside
inside
of
of
the
the
section
section
as
as
opposed
opposed
to
to
the
the
main
main
body
body
of
of
the
the
page.
page
That
that
gives
gives
us
us
an
an
empty
empty
div
div
to
to
work
work
with.
with
Now
now
we
we
can
can
target
target
the
the
before
before
and
and
after
after
pseudo
pseudo
elements,
elements
which
which
are
are
basically
basically
like
like
invisible
invisible
HTML
html
elements
elements
that
that
we
we
can
can
target
target
with
with
our
our
CSS.
css
And
and
in
in
this
this
example,
example
you
you
can
can
think
think
of
of
each
each
one
one
as
as
a
a
circle
circle
that
that
we
we
will
will
intersect
intersect
together
together
to
to
create
create
the
the
illusion
illusion
of
of
a
a
curve.
curve
The
the
content
content
of
of
the
the
element
element
will
will
be
be
an
an
to
to
string,
string
then
then
it
it
will
will
have
have
a
a
position
position
of
of
absolute,
absolute
then
then
the
the
interesting
interesting
thing
thing
is
is
that
that
it
it
has
has
a
a
border
border
radius
radius
with
with
2
2
values.
values
If
if
it
it
was
was
just
just
one
one
value,
value
it
it
would
would
way
way
to
to
perfect
perfect
circle,
circle
but
but
when
when
you
you
add
add
a
a
second
second
value,
value
it
it
creates
creates
an
an
ellipse
ellipse
where
where
the
the
first
first
argument
argument
represents
represents
the
the
vertical
vertical
radius
radius
and
and
the
the
second,
second
the
the
horizontal
horizontal
radius.
radius
Then
then
after
after
that,
that
we'll
we'll
set
set
its
its
width
width
and
and
height.
height
Now
now
at
at
this
this
point,
point
we
we
can
can
apply
apply
the
the
exact
exact
same
same
styles
styles
to
to
the
the
after
after
element
element
as
as
well.
well
That'll
that'll
give
give
us
us
2
2
circles
circles
to
to
work
work
with,
with
and
and
now
now
the
the
tricky
tricky
part
part
is
is
getting
getting
them
them
to
to
line
line
up
up
properly
properly
to
to
look
look
like
like
a
a
curve.
curve
The
the
first
first
one
one
will
will
be
be
our
our
dark
dark
circle,
circle
and
and
the
the
after
after
element
element
is
is
the
the
blue
blue
circle.
circle
The
the
tricky
tricky
part
part
is
is
putting
putting
the
the
circles
circles
in
in
the
the
proper
proper
location,
location
which
which
will
will
likely
likely
take
take
a
a
lot
lot
of
of
trial
trial
and
and
error.
error
I'm
i'm
using
using
the
the
transform
transform
property
property
along
along
with
with
translate,
translate
which
which
is
is
just
just
a
a
fancy
fancy
way
way
to
to
say
say
move
move
the
the
circle
circle
to
to
a
a
different
different
location.
location
The
the
arguments
arguments
to
to
translate
translate
represent
represent
the
the
x
x
and
and
y
y
axis.
axis
The
the
final
final
thing
thing
I'll
i'll
do
do
is
is
on
on
after
after
element
element
at
at
z
z
index
index
negative
negative
one,
one
which
which
ensures
ensures
the
the
darker
darker
element
element
will
will
sit
sit
on
on
top
top
of
of
the
the
lighter
lighter
one.
one
Let's
let's
go
go
ahead
ahead
and
and
open
open
up
up
the
the
page
page
in
in
the
the
browser
browser
and
and
the
the
curve
curve
should
should
now
now
be
be
visible.
visible
If
if
you
you
look
look
closely,
closely
you
you
may
may
notice
notice
that
that
it's
it's
not
not
exactly
exactly
perfect.
perfect
What
what
you'll
you'll
likely
likely
need
need
to
to
do
do
is
is
open
open
up
up
the
the
browser
browser
dev
dev
tools
tools
and
and
play
play
with
with
the
the
values
values
to
to
move
move
them
them
around
around
until
until
they
they
get
get
perfectly
perfectly
aligned.
aligned
Now
now
another
another
issue
issue
is
is
that
that
the
the
current
current
implementation
implementation
is
is
causing
causing
the
the
content
content
to
to
overflow
overflow
horizontally.
horizontally
That's
that's
not
not
good,
good
but
but
an
an
easy
easy
way
way
to
to
fix
fix
the
the
problem
problem
is
is
to
to
set
set
the
the
overflow
overflow
x
x
property
property
to
to
hidden
hidden
on
on
the
the
parent
parent
element.
element
That
that
gets
gets
the
the
job
job
done,
done
but
but
I
i
think
think
CSS
css
is
is
more
more
well
well
suited
suited
for
for
curves
curves
that
that
have
have
a
a
single
single
ellipse
ellipse
or
or
circle.
circle
Let's
let's
go
go
back
back
down
down
to
to
the
the
HTML
html
and
and
add
add
a
a
class
class
of
of
bubble
bubble
to
to
one
one
section
section
and
and
a
a
class
class
of
of
dark
dark
to
to
another
another
section.
section
We
we
can
can
easily
easily
add
add
a
a
curve
curve
here
here
by
by
only
only
targeting
targeting
the
the
after
after
pseudo
pseudo
element
element
and
and
giving
giving
it
it
an
an
elliptical
elliptical
border
border
radius
radius
on
on
the
the
top
top
left
left
and
and
top
top
right,
right
followed
followed
by
by
absolute
absolute
positioning
positioning
to
to
put
put
it
it
in
in
the
the
appropriate
appropriate
location.
location
This
this
example
example
is
is
very
very
similar
similar
to
to
the
the
last
last
one
one
in
in
many
many
ways,
ways
but
but
far
far
more
more
simple.
simple
I
i
would
would
definitely
definitely
use
use
CSS
css
for
for
something
something
like
like
that,
that
but
but
for
for
more
more
complex
complex
curves,
curves
let's
let's
take
take
a
a
look
look
at
at
how
how
scalable
scalable
vector
vector
graphics
graphics
or
or
SVG
svg
can
can
simplify
simplify
our
our
lives.
lives
First,
first
let's
let's
go
go
into
into
our
our
HTML
html
and
and
add
add
a
a
class
class
of
of
red
red
to
to
one
one
of
of
the
the
sections.
sections
The
the
cool
cool
thing
thing
about
about
SVG
svg
is
is
that
that
we
we
can
can
use
use
a
a
design
design
tool
tool
or
or
a
a
purpose
purpose
built
built
web
web
app
app
like
like
this
this
one
one
called
called
Shape
shape
Divider
divider
to
to
automatically
automatically
to
to
draw
draw
the
the
SVG
svg
and
and
provide
provide
the
the
required
required
CSS
css
to
to
add
add
it
it
to
to
the
the
UI
ui
instantly.
instantly
Experiment
experiment
with
with
different
different
settings
settings
to
to
get
get
the
the
design
design
you're
you're
going
going
for,
for
then
then
click
click
the
the
download
download
button
button
and
and
copy
copy
the
the
HTML
html
snippet.
snippet
It
it
contains
contains
an
an
SVG
svg
graphic
graphic
that
that
we
we
can
can
simply
simply
paste
paste
into
into
the
the
bottom
bottom
of
of
one
one
of
of
our
our
sections.
sections
It
it
has
has
a
a
div
div
with
with
an
an
automatically
automatically
generated
generated
class
class
name,
name
which
which
I'm
i'm
going
going
to
to
change
change
to
to
wave
wave
just
just
to
to
simplify
simplify
things
things
here.
here
From
from
there,
there
we
we
can
can
go
go
back
back
to
to
the
the
tool
tool
and
and
copy
copy
the
the
CSS
css
code.
code
Paste
paste
that
that
inside
inside
the
the
style
style
tags,
tags
then
then
highlight
highlight
the
the
class
class
name,
name
then
then
right
right
click
click
to
to
change
change
all
all
the
the
occurrences
occurrences
to
to
the
the
wave
wave
class.
class
Now
now
if
if
we
we
go
go
back
back
to
to
the
the
browser,
browser
We
we
have
have
a
a
wave
wave
that
that
looks
looks
better
better
than
than
the
the
first
first
one
one
with
with
far
far
less
less
effort.
effort
But
but
now
now
let's
let's
take
take
things
things
to
to
the
the
next
next
level
level
by
by
using
using
yet
yet
another
another
free
free
tool
tool
called
called
Hi
hi
k.
k
This
this
web
web
app
app
has
has
a
a
really
really
beautiful
beautiful
UI
ui
and
and
is
is
dedicated
dedicated
to
to
generating
generating
SVG
svg
backgrounds
backgrounds
automatically.
automatically
I'm
i'm
going
going
to
to
use
use
the
the
layered
layered
waves
waves
option
option
and
and
put
put
the
the
waves
waves
on
on
the
the
top.
top
You
you
can
can
tweak
tweak
things
things
here
here
to
to
look
look
however
however
you
you
want.
want
The
the
only
only
important
important
thing
thing
here
here
is
is
that
that
you
you
select
select
colors
colors
that
that
go
go
with
with
the
the
colors
colors
in
in
your
your
actual
actual
CSS
css
code.
code
The
the
other
other
thing
thing
I'm
i'm
going
going
to
to
do
do
here
here
is
is
change
change
the
the
aspect
aspect
ratio.
ratio
You
you
can
can
almost
almost
think
think
of
of
this
this
graphic
graphic
as
as
like
like
a
a
fancy
fancy
border
border
or
or
separator
separator
between
between
content
content
sections,
sections
so
so
it
it
needs
needs
to
to
be
be
long
long
and
and
skinny.
skinny
Make
make
a
a
note
note
of
of
that
that
aspect
aspect
ratio
ratio
because
because
we're
we're
going
going
to
to
need
need
it
it
later.
later
After
after
you're
you're
happy
happy
with
with
the
the
appearance,
appearance
go
go
ahead
ahead
and
and
click
click
the
the
button
button
to
to
download
download
the
the
file
file
as
as
an
an
SVG
svg
into
into
your
your
project.
project
From
from
there,
there
let's
let's
go
go
into
into
the
the
CSS
css
and
and
create
create
a
a
class
class
called
called
spacer.
spacer
We'll
we'll
use
use
a
a
relatively
relatively
new
new
CSS
css
feature
feature
called
called
aspect
aspect
ratio.
ratio
Instead
instead
of
of
trying
trying
to
to
manage
manage
the
the
width
width
and
and
height
height
with
with
the
the
element,
element
we
we
can
can
use
use
the
the
aspect
aspect
ratio
ratio
property
property
and
and
set
set
it
it
to
to
whatever
whatever
value
value
we
we
used
used
for
for
the
the
aspect
aspect
ratio
ratio
on
on
the
the
image,
image
then
then
we'll
we'll
use
use
the
the
image
image
as
as
a
a
background
background
on
on
whatever
whatever
element
element
has
has
this
this
class.
class
The
the
image
image
should
should
take
take
up
up
the
the
entire
entire
element,
element
so
so
we'll
we'll
set
set
background
background
repeat
repeat
to
to
no
no
repeat,
repeat
position
position
it
it
in
in
the
the
center,
center
and
and
give
give
it
it
a
a
background
background
size
size
of
of
cover.
cover
Then
then
we
we
may
may
want
want
to
to
use
use
this
this
class
class
multiple
multiple
times,
times
so
so
I'm
i'm
creating
creating
a
a
second
second
class
class
that
that
defines
defines
the
the
ground
ground
image
image
as
as
the
the
SVG
svg
graphic
graphic
that
that
we
we
just
just
downloaded.
downloaded
From
from
there,
there
we
we
can
can
go
go
down
down
to
to
the
the
HTML
html
and
and
add
add
an
an
empty
empty
div
div
with
with
these
these
two
two
classes
classes
in
in
order
order
to
to
apply
apply
that
that
image
image
as
as
the
the
transition
transition
between
between
2
2
sections.
sections
Now,
now
again,
again
using
using
an
an
empty
empty
div
div
like
like
this
this
is
is
sometimes
sometimes
considered
considered
a
a
bad
bad
practice,
practice
but
but
I
i
do
do
think
think
it's
it's
acceptable
acceptable
in
in
this
this
case,
case
and
and
it's
it's
definitely
definitely
the
the
easiest
easiest
way
way
to
to
get
get
the
the
job
job
done.
done
The
the
end
end
result
result
is
is
this
this
really
really
cool
cool
looking
looking
section.
section
With
with
just
just
a
a
couple
couple
of
of
SVG
svg
graphics
graphics
and
and
some
some
CSS,
css
we
we
can
can
really
really
make
make
this
this
design
design
stand
stand
out,
out
but
but
we're
we're
not
not
done
done
yet.
yet
For
for
the
the
grand
grand
finale,
finale
we're
we're
going
going
to
to
bring
bring
in
in
JavaScript
javascript
to
to
create
create
an
an
animated
animated
morphing
morphing
SVG
svg
to
to
really
really
make
make
the
the
web
web
page
page
come
come
to
to
life.
life
In
in
the
the
HTML,
html
I'm
i'm
adding
adding
a
a
class
class
of
of
pink
pink
and
and
then
then
adding
adding
those
those
spacer
spacer
layers
layers
on
on
either
either
side
side
of
of
it.
it
And
and
the
the
top
top
one
one
has
has
a
a
class
class
of
of
flip
flip
because
because
we
we
need
need
that
that
one
one
to
to
do
do
a
a
one
one
The
the
flip
flip
class
class
in
in
the
the
CSS
css
is
is
just
just
a
a
utility
utility
that
that
will
will
rotate
rotate
the
the
element
element
by
by
a
a
180
180
degrees.
degrees
It
it
should
should
look
look
something
something
like
like
this,
this
but
but
now
now
let's
let's
add
add
a
a
rotating
rotating
blob
blob
right
right
in
in
the
the
middle.
middle
To
to
generate
generate
the
the
blob,
blob
I'll
i'll
go
go
back
back
to
to
the
the
Hi
hi
k
k
app
app
and
and
create
create
2
2
random
random
graphics
graphics
with
with
the
the
blob
blob
shape.
shape
I've
i've
downloaded
downloaded
them
them
into
into
the
the
project,
project
but
but
what
what
I
i
actually
actually
need
need
is
is
the
the
source
source
code
code
from
from
the
the
raw
raw
SVG
svg
file.
file
I'm
i'm
taking
taking
the
the
code
code
from
from
one
one
of
of
the
the
blobs
blobs
and
and
pasting
pasting
it
it
down
down
inside
inside
of
of
the
the
section.
section
What
what
you
you
wanna
wanna
do
do
next
next
Is
is
right
right
click
click
and
and
hit
hit
format
format
document
document
so
so
we
we
can
can
see
see
all
all
the
the
properties
properties
on
on
it
it
clearly.
clearly
Inside
inside
the
the
SVG
svg
code,
code
you'll
you'll
notice
notice
a
a
rect
rect
or
or
rectangle
rectangle
element,
element
go
go
ahead
ahead
and
and
delete
delete
that
that
one.
one
What
what
we're
we're
interested
interested
in
in
is
is
the
the
path,
path
which
which
is
is
the
the
shape
shape
of
of
the
the
blob
blob
itself.
itself
That
that
gives
gives
us
us
one
one
blob
blob
in
in
the
the
SVG,
svg
but
but
we
we
actually
actually
want
want
a
a
second
second
blob
blob
in
in
there
there
as
as
well.
well
So
so
we're
we're
gonna
gonna
go
go
into
into
our
our
other
other
blob
blob
and
and
find
find
the
the
g
g
element,
element
which
which
means
means
group,
group
and
and
go
go
ahead
ahead
and
and
and
and
copy
copy
that
that
element
element
from
from
the
the
raw
raw
SVG
svg
code.
code
Once
once
copied,
copied
go
go
back
back
to
to
the
the
SVG
svg
in
in
the
the
HTML
html
and
and
paste
paste
it
it
as
as
the
the
labeling
labeling
to
to
the
the
other
other
group.
group
I
i
realized
realized
that
that
was
was
very
very
cumbersome
cumbersome
and
and
it
it
would
would
be
be
a
a
lot
lot
easier
easier
if
if
you
you
used
used
a
a
design
design
tool
tool
like
like
Figma,
figma
but
but
that's
that's
beyond
beyond
the
the
scope
scope
of
of
this
this
video.
video
At
at
this
this
point,
point
you
you
should
should
see
see
2
2
blobs
blobs
on
on
top
top
of
of
each
each
other.
other
Now,
now
in
in
order
order
to
to
animate
animate
1
1
blob
blob
into
into
the
the
other,
other
we
we
need
need
to
to
give
give
each
each
path
path
an
an
ID,
id
which
which
we'll
we'll
call
call
blob
blob
1
1
and
and
blob
blob
2.
2
Now,
now
normally,
normally
where
where
a
a
morph
morph
animation
animation
is
is
pretty
pretty
difficult
difficult
to
to
pull
pull
off.
off
But
but
I
i
discovered
discovered
this
this
library
library
called
called
a
a
cute.
cute
Js
js
or
or
maybe
maybe
coute.
coute
Js,
js
not
not
sure
sure
how
how
to
to
pronounce
pronounce
it.
it
It
it
feels
feels
kind
kind
of
of
similar
similar
to
to
GreenSock
greensock
if
if
you
you
ever
ever
using
using
animation
animation
library
library
like
like
that.
that
And
and
to
to
install
install
it,
it
all
all
we
we
have
have
to
to
do
do
is
is
add
add
the
the
script
script
tag
tag
for
for
the
the
CDN
cdn
link
link
to
to
the
the
head
head
of
of
the
the
document.
document
Then
then
down
down
at
at
the
the
bottom
bottom
of
of
the
the
section,
section
we'll
we'll
add
add
a
a
script
script
that
that
references
references
the
the
global
global
object
object
cute
cute
with
with
a
a
k
k
and
and
its
its
from
from
to
to
method.
method
It'll
it'll
use
use
blob
blob
1
1
as
as
the
the
starting
starting
SVG
svg
and
and
then
then
animate
animate
to
to
the
the
blob
blob
2
2
SVG.
svg
And
and
as
as
a
a
final
final
argument,
argument
we
we
can
can
add
add
an
an
object
object
with
with
some
some
options
options
on
on
it,
it
like
like
the
the
duration,
duration
which
which
will
will
be
be
3,000
3,000
milliseconds,
milliseconds
and
and
also
also
the
the
yo
yo
yo
yo
option,
option
which
which
will
will
have
have
it
it
go
go
back
back
and
and
forth
forth
between
between
the
the
2
2
animation
animation
state.
state
And
and
lastly,
lastly
call
call
animation
animation
start,
start
and
and
that's
that's
all
all
it
it
takes
takes
to
to
create
create
an
an
SVG
svg
morphing
morphing
animation
animation
with
with
JavaScript.
javascript
Just
just
a
a
couple
couple
of
of
other
other
little
little
points
points
here,
here
we
we
need
need
to
to
make
make
the
the
second
second
blob
blob
have
have
a
a
visibility
visibility
of
of
hidden
hidden
so
so
it's
it's
not
not
visible
visible
when
when
the
the
animation
animation
first
first
starts.
starts
And
and
then
then
I'm
i'm
also
also
going
going
to
to
add
add
some
some
basic
basic
positioning
positioning
CSS
css
here
here
to
to
position
position
the
the
blob
blob
directly
directly
underneath
underneath
the
the
main
main
content
content
in
in
that
that
section.
section
The
the
end
end
result
result
is
is
this
this
beautiful,
beautiful
curvaceous
curvaceous
website.
website
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
But
but
if
if
you
you
like
like
content
content
like
like
this,
this
upgrade
upgrade
to
to
a
a
pro
pro
membership
membership
on
on
FireShip
fireship
bio
bio
to
to
get
get
access
access
to
to
all
all
of
of
my
my
premium
premium
videos.
videos
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to turn flat and boring design into a beautiful website by showing various tools and videos. They also demonstrate how to create a YouTube blog using various tools and style tags, including Flexbox, curve, and wave, Hi K, and a library. The speaker emphasizes the use of Hi K to generate a desired shape and the Hi K tool for creating a new shape, and reminds viewers to upgrade to a pro membership on Firehair bio.
Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS
They say real developers like curves. And, personally, I love myself a curvaceous website, where each content section transitions elegantly with some waves, blobs, or ripples. In today's beginner friendly tutorial, you'll learn how to turn your flat, boring design into a beautiful curvy one that will turn people's heads. We'll start with a basic HTML homepage that has a hero at the top, a few content sections, and lay footer at the bottom. Then you'll learn a variety of techniques to add curves to these elements, like CSS border radius, SVG backgrounds, and we'll even make some animated warping blobs with JavaScript. That may seem complicated, but it's actually much easier than it looks because there's some amazing tools out there that can make our lives much easier that you've probably never heard of. And And I'll show you a bunch of cool productivity and CSS tips along the way. If you're new here, like and subscribe and follow along with the full written tutorial on Fireship IO. To get Started with this project, all you need to do is open up an editor like Versus Code and create a plain HTML file. Inside that file, type an exclamation point followed by tab to generate some initial HTML boilerplate. That's called an Emmett snippet, and it's built into Versus Code, and we can actually use it to generate a bunch with sections of content as well. In this demo, we have 8 sections of content, so we'll type section times 8, then a right angle bracket to add a child to that element, which in this case will be an h one with the text of nice curves. Notice how I have it wrapped in parentheses because after that, I have a plus sign to add a child next to the h one, which itself will be a paragraph with some dummy text inside of it. Now, go ahead and hit tab and Emmet will automatically generate all that HTML for you. And now that we have a basic HTML page, let's go ahead and serve it in the browser. Here's a little trick to gracefully serve your app locally. Open up the command line, and And if you have Node. Js installed on your machine, you can run npx serve. That'll link you to local host 5000 where you should now be able to see the website. And if you don't have Node. Js installed, you can just copy the path to the HTML file and paste it into your browser. Currently, the website looks terrible. So let's go to Google Fonts to improve it with a custom font. Select any font you want and it will provide an HTML snippet that can be pasted into the head of the document. Then right below that, I'm opening up a style tag where we'll define all of the CSS styles for this project. Let's start by targeting the body of the content and setting its margin 0. Then we'll define our font family as the one we selected from Google Fonts. The text color will be light and the background will be something dark. From there, we can target the section element which represents a block of content in the web page. You'll notice I'm setting the position to relative. This won't change the appearance of it, but it allows its children to be absolutely positioned within it, which is something that will come into play later as we position our backgrounds. Then after that, we can use CSS flexbox locks to make it a flexible container, allowing us to easily center the content in each section. Here's a little side tip. When working with Flexbox in the browser, right click and choose inspect element. That'll bring up the browser dev tools, and you'll notice buttons here that you can click to change the actual properties on Flexbox without having to memorize all different properties available in CSS. Then after that, we can give each section a minimum height of 400 pixels. And for padding, I'll add a 100 pixels to the top and bottom. And for the left and right, I'll use a flexible unit called view width that will give me 20% of the actual view port width, and that'll just make the design a little more responsive to different screen in sizes. Our design is already looking a lot better, but now let's go ahead and add a few utility classes to distinguish between different colors. We can add this class to any section to set the background to that color. Now we're ready to implement our first curve. And to do that, I'm going to add an empty div below the content with a class of curve. Normally, it's not a good practice to have empty divs lying around, but you could add content inside of here if you want it to sit on top of the curve itself. Now Now this curve will be implemented with plain CSS, but I have to warn you that this is the most difficult example in this entire video. Don't get discouraged if it seems too complicated because the upcoming examples are way easier to implement. I'm demonstrating this example primarily to show you that it is possible to implement fairly complex curves with nothing but CSS. The curve itself will have a position of absolute and be placed at the bottom of its parent div. Remember, we set the parent section element to position relative, which is important here because it places the curve inside of the section as opposed to the main body of the page. That gives us an empty div to work with. Now we can target the before and after pseudo elements, which are basically like invisible HTML elements that we can target with our CSS. And in this example, you can think of each one as a circle that we will intersect together to create the illusion of a curve. The content of the element will be an to string, then it will have a position of absolute, then the interesting thing is that it has a border radius with 2 values. If it was just one value, it would way to perfect circle, but when you add a second value, it creates an ellipse where the first argument represents the vertical radius and the second, the horizontal radius. Then after that, we'll set its width and height. Now at this point, we can apply the exact same styles to the after element as well. That'll give us 2 circles to work with, and now the tricky part is getting them to line up properly to look like a curve. The first one will be our dark circle, and the after element is the blue circle. The tricky part is putting the circles in the proper location, which will likely take a lot of trial and error. I'm using the transform property along with translate, which is just a fancy way to say move the circle to a different location. The arguments to translate represent the x and y axis. The final thing I'll do is on after element at z index negative one, which ensures the darker element will sit on top of the lighter one. Let's go ahead and open up the page in the browser and the curve should now be visible. If you look closely, you may notice that it's not exactly perfect. What you'll likely need to do is open up the browser dev tools and play with the values to move them around until they get perfectly aligned. Now another issue is that the current implementation is causing the content to overflow horizontally. That's not good, but an easy way to fix the problem is to set the overflow x property to hidden on the parent element. That gets the job done, but I think CSS is more well suited for curves that have a single ellipse or circle. Let's go back down to the HTML and add a class of bubble to one section and a class of dark to another section. We can easily add a curve here by only targeting the after pseudo element and giving it an elliptical border radius on the top left and top right, followed by absolute positioning to put it in the appropriate location. This example is very similar to the last one in many ways, but far more simple. I would definitely use CSS for something like that, but for more complex curves, let's take a look at how scalable vector graphics or SVG can simplify our lives. First, let's go into our HTML and add a class of red to one of the sections. The cool thing about SVG is that we can use a design tool or a purpose built web app like this one called Shape Divider to automatically to draw the SVG and provide the required CSS to add it to the UI instantly. Experiment with different settings to get the design you're going for, then click the download button and copy the HTML snippet. It contains an SVG graphic that we can simply paste into the bottom of one of our sections. It has a div with an automatically generated class name, which I'm going to change to wave just to simplify things here. From there, we can go back to the tool and copy the CSS code. Paste that inside the style tags, then highlight the class name, then right click to change all the occurrences to the wave class. Now if we go back to the browser, We have a wave that looks better than the first one with far less effort. But now let's take things to the next level by using yet another free tool called Hi k. This web app has a really beautiful UI and is dedicated to generating SVG backgrounds automatically. I'm going to use the layered waves option and put the waves on the top. You can tweak things here to look however you want. The only important thing here is that you select colors that go with the colors in your actual CSS code. The other thing I'm going to do here is change the aspect ratio. You can almost think of this graphic as like a fancy border or separator between content sections, so it needs to be long and skinny. Make a note of that aspect ratio because we're going to need it later. After you're happy with the appearance, go ahead and click the button to download the file as an SVG into your project. From there, let's go into the CSS and create a class called spacer. We'll use a relatively new CSS feature called aspect ratio. Instead of trying to manage the width and height with the element, we can use the aspect ratio property and set it to whatever value we used for the aspect ratio on the image, then we'll use the image as a background on whatever element has this class. The image should take up the entire element, so we'll set background repeat to no repeat, position it in the center, and give it a background size of cover. Then we may want to use this class multiple times, so I'm creating a second class that defines the ground image as the SVG graphic that we just downloaded. From there, we can go down to the HTML and add an empty div with these two classes in order to apply that image as the transition between 2 sections. Now, again, using an empty div like this is sometimes considered a bad practice, but I do think it's acceptable in this case, and it's definitely the easiest way to get the job done. The end result is this really cool looking section. With just a couple of SVG graphics and some CSS, we can really make this design stand out, but we're not done yet. For the grand finale, we're going to bring in JavaScript to create an animated morphing SVG to really make the web page come to life. In the HTML, I'm adding a class of pink and then adding those spacer layers on either side of it. And the top one has a class of flip because we need that one to do a one The flip class in the CSS is just a utility that will rotate the element by a 180 degrees. It should look something like this, but now let's add a rotating blob right in the middle. To generate the blob, I'll go back to the Hi k app and create 2 random graphics with the blob shape. I've downloaded them into the project, but what I actually need is the source code from the raw SVG file. I'm taking the code from one of the blobs and pasting it down inside of the section. What you wanna do next Is right click and hit format document so we can see all the properties on it clearly. Inside the SVG code, you'll notice a rect or rectangle element, go ahead and delete that one. What we're interested in is the path, which is the shape of the blob itself. That gives us one blob in the SVG, but we actually want a second blob in there as well. So we're gonna go into our other blob and find the g element, which means group, and go ahead and and copy that element from the raw SVG code. Once copied, go back to the SVG in the HTML and paste it as the labeling to the other group. I realized that was very cumbersome and it would be a lot easier if you used a design tool like Figma, but that's beyond the scope of this video. At this point, you should see 2 blobs on top of each other. Now, in order to animate 1 blob into the other, we need to give each path an ID, which we'll call blob 1 and blob 2. Now, normally, where a morph animation is pretty difficult to pull off. But I discovered this library called a cute. Js or maybe coute. Js, not sure how to pronounce it. It feels kind of similar to GreenSock if you ever using animation library like that. And to install it, all we have to do is add the script tag for the CDN link to the head of the document. Then down at the bottom of the section, we'll add a script that references the global object cute with a k and its from to method. It'll use blob 1 as the starting SVG and then animate to the blob 2 SVG. And as a final argument, we can add an object with some options on it, like the duration, which will be 3,000 milliseconds, and also the yo yo option, which will have it go back and forth between the 2 animation state. And lastly, call animation start, and that's all it takes to create an SVG morphing animation with JavaScript. Just a couple of other little points here, we need to make the second blob have a visibility of hidden so it's not visible when the animation first starts. And then I'm also going to add some basic positioning CSS here to position the blob directly underneath the main content in that section. The end result is this beautiful, curvaceous website. I'm gonna go ahead and wrap things up there. But if you like content like this, upgrade to a pro membership on FireShip bio to get access to all of my premium videos. Thanks for watching, and I will see you in the next one.
The speaker explains how to turn flat and boring design into a beautiful website by showing various tools and videos. They also demonstrate how to create a YouTube blog using various tools and style tags, including Flexbox, curve, and wave, Hi K, and a library. The speaker emphasizes the use of Hi K to generate a desired shape and the Hi K tool for creating a new shape, and reminds viewers to upgrade to a pro membership on Firehair bio.