SVG/CSS: Masked Header Logo

Question

So I'm trying to make a masked Logo where the piece with the shadow is actually a transparent window to the content behind it.

The design is like this:

I'm thinking I have to tackle this with SVG and Masking, but my attempts didn't really go that well as seen here:

@charset "utf-8";
*{margin:0;padding:0}
body{
	width:100%;
	min-height:100%;
	background-color:#eee;
	color:#eee;
}
/*Header
-------------*/
header{
	position:fixed;
	top:0;
	width:100%;
	height:20%;
	height:auto;
	z-index:999;
}
#logo:before{
	width:10%;
	height:15vw;
	display:block;
	content:"";
	background:#fff;
	float:left;
}
#logo:after{
	width:80%;
	height:15vw;
	display:inline-block;
	content:"";
	background:#fff;
}
#logo img{
	float:left;
	width:10%;
}
/*Content
-------------*/
main{
	position:relative;
	margin:auto;
	width:100%;
	height:200%;
	background:#2d917f
}
/*Links
-------------*/
a,a:visited{
	color:#eee;
	text-decoration:none;
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-o-transition:all .2s ease;
	transition:all .2s ease;
}
a:active, a:hover{
	color:#fff;
	border-bottom:1px solid #fff
}
/*Scrollbar
-------------*/
::-webkit-scrollbar{width:12px;height:12px;background-color:#1A1A1A}
::-webkit-scrollbar-corner{background-color:#0e0e0e}
::-webkit-scrollbar-track{background-color:#121212}
::-webkit-scrollbar-thumb{background:#2d917f}
::-webkit-scrollbar:horizontal{height:12px}
/*Selection
-------------*/
::selection{color:#fff;background-color:#2d917f}
::-moz-selection{color:#fff;background-color:#2d917f}

<header>
	<div id="logo">
		<img  src="https://ap-images.ga/up/2017/05/11151821-Logo2.svg" title="11145933-Logo.svg" alt="11145933-Logo.svg"/>
	</div>
</header>
<main>
</main>

On Codepen: https://codepen.io/RafaelDeJongh/pen/PmROPW

Does anyone have any idea how I'd best tackle this, and in general how to mask a certain part out of an element (in this case the header)?

Thanks in advance!

Answer 1

The simplest solution would just be to make an SVG that:

• A rectangle forming your white banner background
• A mask applied to that forming the whole
• Finally a drop shadow filter applied to the result

Then either embed that SVG into your page and overlay your banner text, or save the SVG as a separate file and use it as a background-imaage for the <header>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1860 256">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <g transform="translate(200,35)">
        <rect x="1" y="1" width="118" height="178" fill="#000"/>
        <path fill="white" d="M0.1,0h119.8v180H0.1V0 M3.2,33.2c0,13.8,0,27.7,0,41.5C18.6,75.1,33.9,80.4,46,90c-0.1-5.1,0-10.2-0.1-15.3
				c16.3-0.2,32.7,5,45.6,15c12.2,9.5,22,22.9,25.4,38.1c-0.4-31.5,0-63-0.2-94.5C78.9,33.2,41.1,33.2,3.2,33.2 M3.6,77.9
				c0,23,0,45.9,0,68.9c14.1,0,28.3,0,42.4,0c0-17.6,0-35.1,0-52.7C34.2,84,18.9,78.4,3.6,77.9 M49,78c0.1,4.8,0,9.5,0,14.2
				c15.5,13.6,25.1,33.8,25,54.5c14.1,0,28.3,0,42.4,0c0.5-17.7-7.1-35.2-19.3-47.8C84.7,86.1,67,78.2,49,78 M49.1,96.6
				c0.1,16.7,0,33.4,0,50.2c7.3,0,14.6,0,21.8,0C70.9,128,62.6,109.6,49.1,96.6z"/>
      </g>
    </mask>
    <filter id="shadow">
      <feOffset in="SourceAlpha" dx="10" dy="10" result="offset" />
      <feColorMatrix in="offset" type="matrix" values="0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0" result="greyoff" />
      <feGaussianBlur in="greyoff" stdDeviation="7" result="blur" />
      <feBlend in="SourceGraphic" in2="blur" mode="normal" />
    </filter>
  </defs>

  <g filter="url(#shadow)">
    <rect x="15" y="15" width="1800" height="220" fill="white" mask="url(#hole)"/>
  </g>
</svg>