feat(app-bar): new svg for the cutout

Author: marcjulian

projects/core/src/lib/app-bar/app-bar.component.html

@@ -6,22 +6,7 @@
     </div>
   </div>
   <ng-content select="fiv-fab"></ng-content>
-  <svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-      <path d="M0,0 C0,28 22,50 50,50 C78,50 100,28 100,0 L101,50 L0,50" id="path-1">
-      </path>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1px" fill="none" fill-rule="evenodd">
-      <g id="cutout">
-        <mask id="mask-2" fill="white">
-          <use xlink:href="#path-1"></use>
-        </mask>
-        <g id="Path"></g>
-        <polygon id="Path" fill-rule="nonzero" mask="url(#mask-2)" points="0 0 100 0 100 50 0 50">
-        </polygon>
-      </g>
-    </g>
-  </svg>
+  <svg  viewBox="0 0 100 50" width="100" height="50" xmlns="http://www.w3.org/2000/svg"><path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd"/></svg>
   <div class="rect-filler"></div>
   <div class="appbar-rect right">
     <div class="tabs">

projects/core/src/lib/app-bar/app-bar.component.scss

@@ -24,7 +24,7 @@ svg {
     env(safe-area-inset-bottom) + var(--fiv-appbar-height) - var(--fiv-radius) /
       2 - var(--fiv-border-radius)
   );
-  polygon {
+  path {
     fill: var(--fiv-color-appbar);
   }
 }