JSFiddle - React, Tailwind, and code Playground

by justintense

HTML

<svg class="svg-defs">
  <defs>
  	 	<clippath id="absolute_path" clipPathUnits="objectBoundingBox">
            <polygon points=".5 0, 1 .5, .5 1, 0 .5"></polygon>
        </clippath>
  
        <clipPath id="clipping">

			<polygon fill="#FFFFFF" points="40,35 40,15 20,35 	"/>
			<polygon fill="#FFFFFF" points="0,35 20,35 0,15 	"/>

			<circle id="white_overlay_9_" fill="#FFFFFF" cx="20" cy="18.77" r="7.393"/>
        </clipPath>
        
   </defs>
</svg>

<div class="full">
	<div id="clip1">
		<div></div>
	</div>
</div>

CSS

.full {
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	height: 35px;
	overflow: hidden;
}

.full > div {
	width: 100%;
    height: 35px;
    position: relative;
    background: #c00 url("images/nav/pattern.svg") repeat scroll 0 0;
}

.full > div > div {
	background: transparent;
	width: 40px;
    height: 35px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transition:2s;
    -moz-transition:2s;
    -o-transition:2s;
    transition:2s;
}


#clip1 {
    -webkit-clip-path: url(#clipping);
    -moz-clip-path: url(#clipping);
    -o-clip-path: url(#clipping);
    clip-path: url(#clipping);
}