Let’s create the same wave from above in SVG. Creating waves with SVGĬreating shapes like waves and other similar complex designs is arguably easier to do with SVG than CSS. Pseudo Elements CSS Wave by Saleh-Mubashar ( CodePen. We use the clip-path in the after element so the purple circle, as shown in the image above, does not exceed the rectangle’s height: Instead, we have a transform scale in the wave class that we can use to scale the wave up or down in the x and y directions. For one, you don’t have to change any values within the code to manually adjust the height and width of the wave.
There are a few important things to note here. We’ll use the top property to move the ovals up and down and a border-radius to give them a circular shape: Ĭlip-path: ellipse(100% 15% at -15% 100%) We’ll give each an absolute position according to the image above, as well as a fixed height and width. Then, we’ll create two pseudo classes for the purple and red ovals. To create this type of wave effect in CSS, first, we’ll create a wave div that will have a relative position and a fixed height and width.
If we make the purple oval black and the red oval white, our wave will be done! We can remove the excess purple part on top of the rectangle by using clip-path, which we’ll discuss later: The basic idea behind creating a wave shape is to create a rectangle element with an oval above and below it:Īs seen in the image below, by overlapping the two ovals on top of the rectangle, we can create the shape of a wave:
Wavy color wallpaper how to#
In this article, we’ll learn how to create a few kinds of simple waves using both CSS and SVG, then implement them into an actual UI. Nowadays, wavy backgrounds are a popular trend in web design, however, the wave is a notoriously difficult shape to implement.
Having interesting, eye-catching visuals can go a long way towards making your site memorable to viewers. How to create a wavy background using CSS and SVG Saleh Mubashar Follow I'm an experienced web developer who uses his knowledge and experience to guide people looking to learn web dev and new technologies.
0 kommentar(er)
