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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |