Responsive svg content - html

Question

I need to make the cut out inside the svg respect the same grid as the external content (so it can align with the button outside). The objective is to make the bar support removing or adding buttons as needed.
Codepen
(That is the code, broken on the stackoverflow editor. Can't import bootstrap stylesheet for some reason. check the codepen above)
body {
background: linear-gradient(to right, blue, orange, teal, grey);
margin: 0;
height: 100vh;
width: 100vw;
}
.bar {
position: fixed;
bottom: 0;
height: 65px;
width: 100%;
}
.bar .content {
position: relative;
z-index: 1;
}
.bar .content .btn {
height: 59px;
width: 59px;
background: white;
border-radius: 100%;
}
.bar .content .btn.active {
margin-top: -20px;
}
.bar svg {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>-->
<div class="bar">
<div class="container content" id="html">
<div class="row">
<div class="col-3">
<div class="btn">BTN</div>
</div>
<div class="col-3">
<div class="btn">BTN</div>
</div>
<div class="col-3">
<div class="btn">BTN</div>
</div>
<div class="col-3">
<div class="btn active">BTN</div>
</div>
</div>
</div>
<svg>
<mask id="myMask">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="85%" cy="10" r="36" fill="black" />
</mask>
<rect x="0" y="0" rx="16" width="100%" height="120%" fill="white" mask="url(#myMask)" />
</svg>
</div>
EDIT 1: It needs to be a cut out of the bar, not a trick with colored borders, it was designed to be a transparent space in the shape of a circle. Added colored background to body. Codepen also updated.

Answer 1

You can get the exact same effect using just CSS and flexbox. If you plan on using a shape divider instead of a flat bar there are ways you can shape the bar using purely CSS of if you want to use SVG then simply swap out the the bar CSS below with an SVG, and it should effect the button locations.
You can learn more about how to use flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And a guide on how to use shape dividers https://css-tricks.com/creating-non-rectangular-headers/
body {
background: #1a7b6c;
height:100vh;
}
.bar {
position: fixed;
bottom: 0;
height: 65px;
width: 100%;
background:#fff;
}
.bar .row {
width:100%;
display:flex;
flex-direction:row;
justify-content:space-around;
z-index: 1;
}
.bar .btn {
display:flex;
justify-content:center;
align-items:center;
width:60px;
height:60px;
background: white;
text-align:center;
}
.bar .btn.active {
margin-top: -20px;
border:#1a7b6c 10px solid;
border-radius: 100%;
}
<div class="bar">
<div class="row">
<div class="col-3">
<div class="btn">BTN</div>
</div>
<div class="col-3">
<div class="btn">BTN</div>
</div>
<div class="col-3">
<div class="btn active">BTN</div>
</div>
</div>