How to Create a Responsive Wavy Shape Using SVG and CSS?

Using SVG and CSS to Create a Wavy Shape

Question: How can I create a wavy shape using CSS, similar to the image provided?

Answer:

The desired wavy shape can be achieved through a combination of SVG and CSS. Here's a comprehensive approach:

First, create an SVG element and define the path for the wave. This path controls the shape's curves and contours. In the example below, the path forms a wave from point (0, 100) to point (500, 100):

<svg viewbox="0 0 500 500" preserveaspectratio="xMinYMin meet">
  <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"></path></svg>

Next, create a container element to hold the SVG. This container will ensure the wave shape remains responsive.

<div class="container">
  <svg viewbox="0 0 500 500" preserveaspectratio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"><p>Finally, style the container using CSS to make it responsive and position the SVG. By setting the container's padding-bottom to 100% and position to relative, you can preserve the aspect ratio of the SVG while filling the container's available height:</p><pre class="brush:php;toolbar:false">.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

This approach ensures that the SVG wave shape is responsive, maintaining its desired form regardless of the container's dimensions.