Q: Creating a responsive circular header with SVG shapes I am trying to make a semicircular/oval shaped header that is responsive along with the content inside it. Right now it only really looks fine on desktop and I really have no clue how to get it to look correct on mobile or when the window gets resized.
The problem is that on zoom out the visible part of the circle gets too thin at the top and almost disappears, leaving the content of the header now outside of the shape, and on zoom in (and on mobile devices/smaller screens) the circle just gets ridiculously huge and the image in the svg doesnt fill the header shape anymore.
Thanks for your help.
Ideally the header should look like this:

And on mobile instead of looking like this

something more like this:

Here is another issue of it which i exaggerated by zooming out a lot:

Here is a fiddle: https://jsfiddle.net/150dr2bb/27/
and here is all the code needed to reproduce this:
HTML:
<header>
  <div id="headercirclecont" style="text-align:center;">
    <svg id="headerwhitecircle" preserverAspectRatio="none">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#7c3495;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#f3366a;stop-opacity:1" />
        </linearGradient>
        <clipPath id="circleView">
          <circle cx="50vw" cy="-20vh" r="790px"/>            
        </clipPath>
      </defs>

      <circle cx="50vw" cy="-20vh" r="800px" fill="white" /> 
      <circle cx="50vw" cy="-20vh" r="790px" fill="url(#grad1)" /> 
      <image id="circleflimage" width="100vw" opacity="0.1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Phinizy_swamp_nature_park_floodplain_in_hdr.jpg/1200px-Phinizy_swamp_nature_park_floodplain_in_hdr.jpg" clip-path="url(#circleView)"/>
    </svg>  
  </div>

  <div id="headercontent">
    <div id="headerparent">
      <div>
        <h1 id="logo" class="whitetext">
          Test
        </h1>
      </div> 
      <br>
      <div id="headsocials">
        <p class="svgsocials">a</p>
        <p class="svgsocials">a</p>
        <p class="svgsocials">a</p>
        <p class="svgsocials">a</p>
        <p class="svgsocials">a</p>
        <p class="svgsocials">a</p>
      </div>
    </div>

  </div>
</header>

CSS:
html{
  margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
}

body{
  background: #161925;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "moon2reg", "latolight", "calibri", sans-serif;
    font-weight: normal;
    font-size: 17px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
    height: 100%;
    display: block;
}

header {
  height: 700px;
  max-height: 700px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
    flex-direction: row;
}

#headerwhitecircle {
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 100%;
  max-height: 700px;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left:auto; margin-right:auto;
  width: 100%;
}

#headercirclecont {
  display: flex;
    justify-content: center;
    align-items: center;
}

#circleflimage {
  margin: 0 auto;
  text-align: center;
  max-width: 100vw;
  max-height: 700px;
}

#headercontent {
  width: 100%;
  max-width: 600px;
  height: 100%;
  max-height: 700px;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
    flex-direction: row;
    align-items:center;

}

#headerparent {
  margin: 0 auto;
}

#logo {
  width: 100%;
  max-width: 600px;
  z-index: 1;
}

#headsocials {
  width: 100%;
  height: 40px;
  display: flex;
}

p.svgsocials {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 auto;
}

p.svgsocials:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

h1 {
  color: #161925;
    margin: 0;
    font-size: 80px;
    font-weight: 100;
    font-family: moon2reg calibri;
}

p {
  color: #ffffff;
  font-size: 30px;
  margin: 5px;
}

.whitetext {
  color: #ffffff;
}

.centertext {
  text-align: center;
}

#titleTxt {
  height: 100%;
  max-height: 60px;
}


A: I think you may have complicated things for yourself here by trying to control the behaviour of the SVG using units like vw and vh, rather than using an SVG  viewBox and taking advantage of SVG's built-in responsiveness features.
When you switch to a viewBox everything becomes a lot simpler and easier.
Fiddle here: https://jsfiddle.net/150dr2bb/58/


@charset "UTF-8";
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

    html{
      margin: 0 !important;
        padding: 0 !important;
        height: 100%;
        width: 100%;
    }

    body{
      background: #161925;
        height: 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        font-family: "moon2reg", "latolight", "calibri", sans-serif;
        font-weight: normal;
        font-size: 17px;
    }

    header {
      width: 100%;
      max-width: 1600px;
      position: relative;
      margin: 0 auto;
      display: flex;
      justify-content:center;
      align-items:center;
      flex-wrap: wrap;
        flex-direction: row;
    }

    #headercirclecont {
      display: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }

    #headerwhitecircle {
      width: 100%;
      height: 100%;
      min-height: 250px;
      max-height: 700px;
    }

    #headercontent {
      position: absolute;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center; 
    }

    #headerparent {
      margin: 0 auto;
    }

    #logo {
      width: 100%;
      max-width: 600px;
      z-index: 1;
    }

    #headsocials {
      width: 100%;
      height: 40px;
      display: flex;
    }

    p.svgsocials {
      position: relative;
      display: inline-block;
      width: 100%;
      margin: 0 auto;
    }

    p.svgsocials:after {
      content: ""; 
      position: absolute; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0;
    }

    h1 {
      color: #161925;
        margin: 0;
        font-size: 80px;
        font-weight: 100;
        font-family: moon2reg calibri;
    }

    p {
      color: #ffffff;
      font-size: 30px;
      margin: 5px;
    }

    .whitetext {
      color: #ffffff;
    }

    .centertext {
      text-align: center;
    }

    #titleTxt {
      height: 100%;
      max-height: 60px;
    }
<header>
      <div id="headercirclecont" style="text-align:center;">
        <svg id="headerwhitecircle" viewBox="0 0 1600 700" preserveAspectRatio="xMidYMin slice">
          <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:#7c3495;stop-opacity:1" />
              <stop offset="100%" style="stop-color:#f3366a;stop-opacity:1" />
            </linearGradient>
            <clipPath id="circleView">
              <circle cx="800" cy="-100" r="790px"/>            
            </clipPath>
          </defs>

          <circle cx="800" cy="-100" r="800px" fill="white" /> 
          <circle cx="800" cy="-100" r="790px" fill="url(#grad1)" /> 
          <image id="circleflimage" width="1600" height="700" preserveAspectRatio="xMidYMin slice" 
                 opacity="0.1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Phinizy_swamp_nature_park_floodplain_in_hdr.jpg/1200px-Phinizy_swamp_nature_park_floodplain_in_hdr.jpg" clip-path="url(#circleView)"/>
        </svg>  
      </div>

      <div id="headercontent">
        <div id="headerparent">
          <div>
            <h1 id="logo" class="whitetext">
              Test
            </h1>
          </div> 
          <br>
          <div id="headsocials">
            <p class="svgsocials">a</p>
            <p class="svgsocials">a</p>
            <p class="svgsocials">a</p>
            <p class="svgsocials">a</p>
            <p class="svgsocials">a</p>
            <p class="svgsocials">a</p>
          </div>
        </div>

      </div>
</header>


