CSS Wave Header - Dynamic Dimensions

<div id="bar">
  <div id="wave"/><div/>
</div>
<style>
#bar {
  background: #00F;
  height: 120px;
  position: relative;
  overflow: hidden;
}
#wave {
  height: 50%;
  width: 100%;
  background: #F00;
  overflow: hidden;
}

#wave::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 75%;
  height: 75%;
  background-color: #00F;
  right: -18.5%;
  bottom: calc((100% / 200) - (100% / 1000));
}

#wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 75%;
  height: 75%;
  background-color: #F00;
  left: -18.5%;
  top: calc((100% / 200) - (100% / 1000));
}
</style>