How can I create a wavy shape CSS?

Question

Please see the image below for what I am trying to create:

I have the following so far but it needs to be more \'\'frequent\'\' like increasing the frequenc

Answer 1

Here is an idea with radial-gradient and CSS variables where you can easily control the shape:

.wave {
  --c:red;   /* Color */
  --t:5px;   /* Thickness */
  --h:50px;  /* Height (vertical distance between two curve) */
  --w:120px; /* Width  */
  --p:13px;  /* adjust this to correct the position when changing the other values*/
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
    
  background-size:var(--w) var(--h);
  background-position:calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
  
  
  border:1px solid;
  margin:5px 0;
  display:inline-block;
  width:300px;
  height:150px;
}

<div class="wave"></div>

<div class="wave" style="--w:200px;--h:40px;--p:10px; --t:8px;--c:purple"></div>

<div class="wave" style="--w:80px ;--h:20px;--p:5px;  --t:3px;--c:blue;"></div>

<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>