Wavy Border CSS

Question

I am trying to figure out how to make a wavy border this way:

div {
  position:relative;
  height:100px;
  width:100px;
  background:transparent;
  overflow:hidden;
}

div:before {
  content:"";
  position:absolute;
  top:calc(-100% - 25px);
  left:00%;
  height:200%;
  width:200%;
  border-radius:50%;
  background:cornflowerblue;
  border-bottom:50px solid blue;
}
div:nth-child(2) {
  transform:rotate(180deg);
  margin-left:40px;
  margin-top:-25px;
}

<div></div>
<div></div>

Run codeHide result

I have this example above, however I want to do it better. This example is a very very dirty way to do this.

I thought about this with an image, but then I can’t change the color with CSS every time I want to change the color scheme.

Does anyone have any ideas?

I do not want to use oval shapes to create waves, as this is not neat.