Layered waves with SVGĪnother common wave design involves using multiple waves to form a layered effect. SVG Wave Design by Saleh-Mubashar ( CodePen. The SVG approach is similar, however, we add the SVG code directly after the container. With the CSS approach, we simply add the div with class of wave after the container:ĬSS Wave Design by Saleh-Mubashar ( CodePen. We’ll implement the wave at the bottom of the blue background. The design is very simple, consisting of a title, some text, and a dummy button, but you can build onto it as desired. To wrap things up, we’ll create a simple web design using both the CSS and SVG waves. Take a look at the one below for our wave: Lastly, L creates the straight lines to the right and left of the rectangle.Ī great way to create a wave, visualize it, and work with SVGs in general is to use an SVG path editor. We’ve given it three coordinates, which represent the maximum and minimum points of the wave. Basically, we are moving to the coordinate 0,100. For the path, we first have an M command in the position 0,100. ViewBox in the SVG element basically determines the width and height of the SVG as a whole. In the HTML, you can see the simple, four line SVG code we used to create this wave. Simple SVG Wave by Saleh-Mubashar ( CodePen. C: Curve to takes three sets of coordinates as parameters to create a Bézier curve.L: Line to takes two x and y parameters, creating a line from the current position to the new position.M: Move to takes two x and y parameters.Below is a brief overview of the commands we’ll use: The SVG path element will do most of the work for us. To start off, we need a basic understanding of how SVG shapes work. 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: 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |