Search code examples
htmlcsssvgpathclip

Cutting out half a circle header with an SVG

Hey there i am trying to achieve the following fix header shape.

It should be responsive and keep the shape, i figured to use a background SVG but i am struggling to cut out the inner circle part instead of having it black as well as scaling it responsively.

enter image description here

body {
  height: 1000px;
}


.circle {
    padding-top: 4rem;
    height: calc(100% - 4rem);
    /* margin-bottom: -4rem; */
    background-size:cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'%3E %3Ccircle fill='evenodd' cx='250' cy='250' r='250' /%3E %3C/svg%3E");

}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<header class="fixed w-screen h-32 bg-green-light">

    <p class="pl-4 pt-2 text-4xl h-16 text-white">
      blabla
    </p>
  <div class="circle">  </div>
</header>

<main class="w-screen pt-16">
  <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
</main>

Solution

  • Your SVG background needs to be a rectangle with a circular hole cut out of it.

    If you don't want to draw this shape in a vector editor, then you'll need to use a <mask> to make a circular hole in a rectangle.

    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'>
  <mask id="circular-hole">
    <rect width="100%" height="100%" fill="white"/><!-- part to keep -->
    <circle cx='250' cy='250' r='250' fill="black"/><!-- black for the hole -->
  </mask>
  <rect width="100%" height="100%" fill="#51d88a" mask="url(#circular-hole)"/>
</svg>

    And your page updated with this SVG:

    body {
  height: 1000px;
}


.circle {
    padding-top: 4rem;
    height: calc(100% - 4rem);
    /* margin-bottom: -4rem; */
    background-size:cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'%3E %3Cmask id='circular-hole'%3E %3Crect width='100%25' height='100%25' fill='white'/%3E %3Ccircle cx='250' cy='250' r='250' fill='black'/%3E %3C/mask%3E %3Crect width='100%25' height='100%25' fill='#51d88a' mask='url(%23circular-hole)'/%3E %3C/svg%3E");

}
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<header class="fixed w-screen">
  <p class="pl-4 pt-2 text-4xl h-16 text-white bg-green-light">
    blabla
  </p>
  <div class="circle">  </div>
</header>

<main class="w-screen pt-16">
  <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
</main>