HTML
<header>
<nav></nav>
<div class="menu-trigger">
<span></span>
</div>
</header>
<!-- SVG -->
<svg>
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5"/>
<feColorMatrix in="blur" result="colormatrix"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 18 -8" />
<feBlend in="SourceGraphic" in2="colormatrix"/>
</filter>
</defs>
</svg>
SASS
// Variabls
$bodyBG: tomato
body
background-color: $bodyBG
height: 2000px
header
filter: url('#goo')
nav
background-color: #fff
height: 80px
.menu-trigger
position: fixed
width: 50px
height: 50px
border-radius: 50%
background-color: #fff
cursor: pointer
top: 15px
right: 40px
span,
span::before,
span::after
background-color: #555
width: 25px
height: 2px
position: absolute
span
top: 50%
left: 50%
transform: translate(-50%,-50%)
span::before
content: ''
top: -6px
span::after
content: ''
top: 6px
