how to make a curved header with svg or with anoth

I am trying to make a curved header. And I am wondering if anyone can point me the right direction/or the best method the header as in the following image. I am not a developer so I am slogging.

here is the image of the theme and curved header

And here is my code.How can I achieve to make exactly the same header on the above image?

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
:root{
    --red-color:#FF5F6D;
    --white-color:#FFFFFF;
    --yellow-color:#fff9c4;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    align-items: center;
    justify-content: center;    
      
}
.wrapper >*{
    font-size: 1.5rem;
    font-weight: 800;
}
.t-orange-nav{
    background-color: var(--red-color);
    color: var(--yellow-color);
    position: relative;
}

.t-orange-nav > div {
  border-bottom: 3px solid white;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.t-orange-nav p {
  font-size: 10px;
}

.t-orange-header{
  padding: 20px 0;
    background-color: var(--red-color);
    height: 200px;
    color: var(--yellow-color);
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(#FF5F6D , #FFC371 );    
}


.t-orange-section{
  background-color: var(--white-color);
   color: #FF5F6D;
   height: 300px;
   width: 95%;
   margin: 0 auto;
   
}

.t-orange-section > div {
  border-bottom: 3px solid black;
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 0;
}

.t-orange-article{
   background-color: var(--white-color);
   color: #FF5F6D;
   height: 300px;
   width: 95%;
   margin: 0 auto;      
}

.t-orange-article > div {
  border-bottom: 3px solid black;
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 0;
}
.t-orange-aside{
    background-color: var(--white-color);
    color: var(--red-color);
    height: 200px;
        
}
.t-orange-footer{
    background-color: var(--red-color);
    color: var(--yellow-color);
    height: 50px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title></title>
</head>
<body>
    <div class="wrapper">
        <nav class="t-orange-nav">
          <div>
            nav
            
          </div>
        </nav>
        <header class="t-orange-header">
          <div>
            HEADER
	         </div>

        </header>
        <section class="t-orange-section">
          <div>
            section
          </div>
        </section>
        <article class="t-orange-article">
          <div>  
          article
          </div>
        </article>
        <aside class="t-orange-aside">
            aside
        </aside>
        <footer class="t-orange-footer">
            footer
        </footer>
    </div>
</body>
</html>

You may use a SVG image for that. Just copy the code below in your html or save it with a .svg extension and use it as a regular image.

<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
      <rect x="0" y="0" width="50" height="100" style="fill: black;"/>
    </pattern>
    <linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
      <stop offset="0" style="stop-color: rgb(254, 199, 131);"/>
      <stop offset="1" style="stop-color: rgb(253, 122, 126);"/>
    </linearGradient>
  </defs>
  <g id="svgg">
    <path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
  </g>
</svg>